vue 全局前置守卫应用实例

vue 全局前置守卫应用实例

解决路由传参后可以打开两个相同页面的问题。

解决方案：
需要在router.js里应用全局前置守卫给路由加相同的参数，例如token。

代码：

Vue.use(Router)
const router = new Router({
	routes: [
		{
            path: '/xxx',
            component: () =>
                import ('./views/xxx/xxx/xxx.vue'),
            meta: {},
            children: [{
                path: '/xxx/xxx',
                name: 'xxx',
                meta: {
                    title: 'xxx',
                    index: 3,
                },
                component: () =>
                    import ('./views/xx/xxx/xxxx/xxxxx.vue')
            }]
        },
	]
})
// 全局路由守卫
router.beforeEach((to, from, next) => { //to进入的路由；from离开的路由
    if (to.query.token) {
        next();
        return;
    };
    if (from.query.token) {
        let toQuery = JSON.parse(JSON.stringify(to.query));
        toQuery.token = from.query.token;
        next({
            path: to.path,
            query: toQuery
        })
    } else {
        next()
    };
});