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

最新推荐文章于 2025-04-09 14:56:01 发布

前端_小学生

最新推荐文章于 2025-04-09 14:56:01 发布

阅读量8.2k

点赞数 5

分类专栏： vue vue-router 文章标签： vue vue-router query 加密参数加密

本文链接：https://blog.youkuaiyun.com/weixin_44243061/article/details/107092308

版权

本文介绍如何在vue-router中对query参数进行加密处理。通过自定义`stringifyQuery`和`parseQuery`方法，实现序列化和解析过程中参数的加密解密，确保在地址栏显示的安全。注意，此方法仅处理URL查询参数，不涉及路由跳转时的参数。示例代码和详细步骤可在提供的GitHub仓库中查看。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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</

最低0.47元/天解锁文章