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()
};
});