vue-router路由中对query中的参数进行加密

vue-router路由中对query中的参数进行加密

源码地址在文末

在创建路由的时候，添加两个方法

• stringifyQuery: 序列化传入的query参数，方法可以接收一个对象参数

  在new Router的时候传递这个属性，在序列化query参数的就执行这个方法，不会执行默认的方法，序列化后在地址栏显示序列化之后的参数

• parseQuery: 解析地址栏参数，方法接收一个字符串参数

  在new Router的时候传递这个属性，在解析query参数的时候，回执行这个方法，不会在执行默认的方法，

  注： 这个方法只解析path中的参数，或者浏览器刷新的时候的地址栏的参数，不会对在query参数对处理，如：

  ```javascript
      this.$router.push({
          path: "foo?a=123",
          query: {
              b: 345
          }
      })
  ```
  

  在执行这段代码的时候，parseQuery方法不会对query:{b: 345}进行解析,会解析path:"foo?a=123"中的a=123的字符串

使用方式：

例：

• router/index.js

import Vue from "vue"
import VueRouter from "vue-router";
import {
    stringifyQuery, parseQuery } from "./utils/query";


Vue.use(VueRouter);

const routes = [
    {
   
        path: "/",
        name: "home",
        component: () => import(/* webpackChunkName: "home" */"../views/Home")
    },
    {
   
        path: "/foo",
        name: "foo",
        component: () => import(/* webpackChunkName: "foo" */"../views/Foo")
    },
    {
   
        path: "/bar",
        name: "bar",
        component: () => import(/* webpackChunkName: "bar" */"../views/Bar")
    }
];

const router = new VueRouter({
   
    mode: 'history',
    base: process.env.BASE_URL,
    stringifyQuery: stringifyQuery,
    parseQuery: parseQuery,
    routes
});

export default router

• router/utils/query.js

import {
    getEncryptToBase64 as encrypt, getDecryptByBase64 as decrypt } from "./encryption"
const encodeReserveRE = /[!'()*]/g
const encodeReserveReplacer</