vue-element-admin把动态路由放导航列表中间，动态路由刷新跳转404_constantroutermap 404

需求

把动态路由放在导航中间而不是最后

思路

只要在修改原来插入动态路由的地方就可以

操作

修改文件： /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
  }
}
1
2
3
4
5
6
7
8
9
10

问题

这会带来一个问题，就是通配路由“*”放在那里？通配路由需要放在整个路由的最后，所以不能放在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 })
1
2
3
4
5
6
7
8
9
10
11
12

这样动态路由刷新就不会跳转到404啦！