问题出在静态路由下面有个通配符匹配到/404页面

我们把静态路由下的
{ path: '*', redirect: '/404', hidden: true }

删除就可以了。

在动态路由校验的代码中有处理跳转404的代码

【updated】

做了动态路由的话把上面的代码放在动态路由结尾处是更好的选择。

vue开发页面，通过addRoutes实现动态路由的添加，但是在进入对应页面的时候刷新时跳转到404或空白，最后发现只需把空白页面跳转直接加载到动态路由后面即可解决，代码如下：
   1：静态路由中注释掉{ path: '*', redirect: '/404', hidden: true }（如果有）
   2：在动态路由中push上面注释掉的路由，asyncRoutes.push({ path: '*', redirect: '/404', hidden: true });
   一天的郁闷最后时刻搞定，哈哈哈哈哈哈哈。。。。。。

需求
把动态路由放在导航中间而不是最后
思路
只要在修改原来插入动态路由的地方就可以
操作
修改文件： /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啦！

vue-admin-template （vue-element-admin）是个非常好用的B端UI框架，谁用谁知道！

在使用的过程中，加入权限模块后，刷新后权限控制的页面就默认跳转到404页面了，搞了半天终于解决了，原因是权限控制的路由模块是动态添加进去的，而我的404监听路由是在默认路由里面的，优先级比动态路由要高，所以刷新后默认先被404接管了，改一下，把404监听路由也放到动态路由的末尾就可以了，代码如下：

// 404 page must be placed at the end !!!
{ path: '*', redirect: '/404', hidden: true }

把上面这个路由从constantRoutes转移到asyncRoutes中即可！