Vue Sample code for routing password

Vue route transfer to participate

First, create a

const Base64 = {
   //encryption    encode(str) {
        return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g,
            function toSolidBytes(match, p1) {
                return ('0x' + p1);
            }));
    },
  //Decryption    decode(str) {
        // Going backwards: from bytestream, to percent-encoding, to original string.
        return decodeURIComponent(atob(str).split('').map(function (c) {
            return '%' + ('00' + (0).toString(16)).slice(-2);
        }).join(''));
    }
}
export default Base64

Quoted in

import Base64 from './assets/js/' 

.$Base64 = Base64;

Use page:

this.$({
  path: "/user/Recommend",
  query:{
    info:this.$(XXXXX)//this.$((row))
  }
}）;

Accept parameters page:

let params = (this.$(this.$))

Vue project: Chinese parameters are URL-encoded when routing jumps. How to solve it? Encapsulate Base64 encoding, decoding, encryption and decryption with js

1. Encapsulate the js method in utils, the code is as follows:

var Base64 = {

    // private property
    _keyStr: "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=", //Key (cannot be modified)    
    // public method for encoding
    encode: function(input) {
    var output = "";
    var chr1, chr2, chr3, enc1, enc2, enc3, enc4;
    var i = 0;
    
    input = Base64._utf8_encode(input);
    
    while (i &lt; ) {
    
    chr1 = (i++);
    chr2 = (i++);
    chr3 = (i++);
    
    enc1 = chr1 &gt;&gt; 2;
    enc2 = ((chr1 &amp; 3) &lt;&lt; 4) | (chr2 &gt;&gt; 4);
    enc3 = ((chr2 &amp; 15) &lt;&lt; 2) | (chr3 &gt;&gt; 6);
    enc4 = chr3 &amp; 63;
    
    if (isNaN(chr2)) {
    enc3 = enc4 = 64;
    } else if (isNaN(chr3)) {
    enc4 = 64;
    }
    
    output = output + this._keyStr.charAt(enc1) + this._keyStr.charAt(enc2) + this._keyStr.charAt(enc3) + this._keyStr.charAt(enc4);
    
    }
    
    return output;
    },
    
    // public method for decoding
    decode: function(input) {
    var output = "";
    var chr1, chr2, chr3;
    var enc1, enc2, enc3, enc4;
    var i = 0;
    
    input = (/[^A-Za-z0-9+/=]/g, "");
    
    while (i &lt; ) {
    
    enc1 = this._keyStr.indexOf((i++));
    enc2 = this._keyStr.indexOf((i++));
    enc3 = this._keyStr.indexOf((i++));
    enc4 = this._keyStr.indexOf((i++));
    
    chr1 = (enc1 &lt;&lt; 2) | (enc2 &gt;&gt; 4);
    chr2 = ((enc2 &amp; 15) &lt;&lt; 4) | (enc3 &gt;&gt; 2);
    chr3 = ((enc3 &amp; 3) &lt;&lt; 6) | enc4;
    
    output = output + (chr1);
    
    if (enc3 != 64) {
    output = output + (chr2);
    }
    if (enc4 != 64) {
    output = output + (chr3);
    }
    
    }
    
    output = Base64._utf8_decode(output);
    
    return output;
    
    },
    
    // private method for UTF-8 encoding
    _utf8_encode: function(string) {
    string = (/ /g, " ");
    var utftext = "";
    
    for (var n = 0; n &lt; ; n++) {
    
    var c = (n);
    
    if (c &lt; 128) {
    utftext += (c);
    } else if ((c &gt; 127) &amp;&amp; (c &lt; 2048)) {
    utftext += ((c &gt;&gt; 6) | 192);
    utftext += ((c &amp; 63) | 128);
    } else {
    utftext += ((c &gt;&gt; 12) | 224);
    utftext += (((c &gt;&gt; 6) &amp; 63) | 128);
    utftext += ((c &amp; 63) | 128);
    }
    
    }
    
    return utftext;
    },
    
    // private method for UTF-8 decoding
    _utf8_decode: function(utftext) {
    var string = "";
    var i = 0;
    var c,c1,c2,c3 = 0;
    
    while (i &lt; ) {
    
    c = (i);
    
    if (c &lt; 128) {
    string += (c);
    i++;
    } else if ((c &gt; 191) &amp;&amp; (c &lt; 224)) {
    c2 = (i + 1);
    string += (((c &amp; 31) &lt;&lt; 6) | (c2 &amp; 63));
    i += 2;
    } else {
    c2 = (i + 1);
    c3 = (i + 2);
    string += (((c &amp; 15) &lt;&lt; 12) | ((c2 &amp; 63) &lt;&lt; 6) | (c3 &amp; 63));
    i += 3;
    }
    
    }
    
    return string;
    }
    
    }

    export default Base64

2. Introduce and mount it on the vue prototype object

//Base64 encryptionimport Base64 from '@/utils/'
.$Base64 = Base64

3. Use in vue files

this.$(str) //encryptionthis.$(str) //Decryption

Expand: Other ways to encode and decode

1.md5

Commonly used for encryption, it can be cracked in reverse brute force, but it is very difficult. Generally speaking, the requirement for md5 encryption is that modern computers with the highest computing power will take a hundred years to decrypt.

The encoding and decoding of the object

(str) //rightstrDo coding

binary to ascii, used toascii stringorBinary dataConvert to oneA base64 encoded stringIndicates thatBase64 encoding process, often used inEncoded strings。btoaCannot edit Unicode characters

(str) //Decode str

ascii to binary, used forDecode a data that has been encoded by base-64,Right nowDecode Base64 encoded strings。

Character encoding

encodeURI(str) //Convert URL address encoding into ASCII character sequencedecodeURI(str) //Convert ASCII character sequence to UTL addressencodeURIComponent(str) //Convert Chinese character encoding into ASCII character sequencedecodeURIComponent(str) //WillASCIICharacter sequence decoding into Chinese characters

4. Use escape() and unescape() of JS functions

var escape1 =escape("My name is:");//coding      (escape1);
      var unescape1 = unescape(escape1); //decoding      (unescape1);

This is the article about Vue routing and participating secrets. For more related content on Vue routing and participating secrets, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!