登陆前的固定路由
let router = new Router({
routes: fixedRouter,
base: process.env.BASE_URL
});
登陆后的动态路由
function $addRoutes(arr) {
router.matcher = new Router({
routes: fixedRouter,
base: process.env.BASE_URL
}).matcher;
for (let i = 0; i < arr.length; i++) {
router.addRoute(arr[i]); // arr登录后传进的有权限的路由
}
}
在动态路由的页面中刷新后,调用this.$router.back会失效,只有url在动,页面未刷新。
查看vue-router.common.js, 在HashHistory.prototype.setupListeners 方法中打印发现使用matcher动态添加的路由没有调用该方法
解决方法
直接在代码 VueRouter.prototype.init 方法初始时手动调用 this. history.setupListeners()。(不推荐,重装依赖后,需要重新添加)
-
在调用 $addRoutes 动态添加方法时,调用一下 router.history.setupListeners()
function $addRoutes(arr) { router.matcher = new Router({ routes: fixedRouter, base: process.env.BASE_URL }).matcher; for (let i = 0; i < arr.length; i++) { router.addRoute(arr[i]); // arr 登录后传进的有权限的路由 } router.history.setupListeners(); }
调用后router.back开始生效。
使用的vue-router是3.5.1 hash模式