vue重写push方法对路由参数进行统一编码、路由守卫afterEach中统一解码

最新推荐文章于 2022-12-17 15:58:24 发布

大熊猫玩菜刀

最新推荐文章于 2022-12-17 15:58:24 发布

阅读量1k

点赞数 1

分类专栏： vue 文章标签： vue.js

本文链接：https://blog.csdn.net/u013727805/article/details/122356416

版权

vue 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

直接上代码：

main.js

import Vue from 'vue';
import App from './App.vue';

import VueRouter from 'vue-router';

import router from './router/index.js';

import { Base64 } from 'js-base64';

Vue.config.productionTip = false;

/* router.beforeEach((to, from, next) => {
    if (?) {
        next({
            path: to.path,
            params: {
            },
            query: {
                'q':''
            },
            replace: true,
        });
    } else {
        next();
    }
}); */

// 路由守卫afterEach中对参数进行解码

router.afterEach(to => {
    const q = to.query.q;
    if (q) {
        try {
            const query = JSON.parse(Base64.decode(q));
            delete to.query.q;
            Object.assign(to.query, query);
        } catch (e) {
            console.error(e);
        }
    }
});

// 重写 push 方法，对参数进行编码

const vueRouterPush = VueRouter.prototype.push;

VueRouter.prototype.push = function (e) {
    const query = e.query;
    try {
        if (query && Object.keys(query).length > 0) {
            const q = Base64.encode(JSON.stringify(e.query));
            e.query = {
                q
            };
        }
    } catch (e) {
        console.error(e);
    }
    return vueRouterPush.call(this, e).catch(err => err);
};

new Vue({
    el: '#app',
    router,
    render: h => h(App)
});