需求
把动态路由放在导航中间而不是最后
思路
只要在修改原来插入动态路由的地方就可以
操作
修改文件: /src/store/modules/permission.js
。
const mutations = {
SET_ROUTERS: (state, routes) => {
state.addRoutes = routes
// state.routes = constantRoutes.concat(routes) //权限路由在最后
// 把权限路由放在中间,在constantRoutes
let rou = constantRoutes
rou.splice(3,0,...routes)
state.routes = rou
}
}
问题
这会带来一个问题,就是通配路由“*”放在那里?通配路由需要放在整个路由的最后,所以不能放在asyncRouterMap的最后,但是也不能直接放在constantRoutes的最后,因为在动态路由在刷新时会跳转到404,因为刷新是动态路由还没加载进来,但是页面已经进行了跳转,找不到匹配的路由,最后会去到通配路由。
解决
需要手动在动态路由加载后,再把通配路由加上去
修改文件: /src/permission.js
。
const res = await store.dispatch('user/getInfo')
let roles = res.info.auth_list
const accessRoutes = await store.dispatch('permission/GenerateRoutes', roles)
let old = JSON.parse(JSON.stringify(router.options))
router.addRoutes(accessRoutes)
// 在这动态添加最后的通配路由,确保先有动态路由、再有通配路由,解决动态路由刷新会跳转到404问题
let lastRou = [{ path: '*', redirect: '/404' }]
router.addRoutes(lastRou)
let newr = JSON.parse(JSON.stringify(router.options))
next({ ...to, replace: true })
这样动态路由刷新就不会跳转到404啦!