vue3+vite3（三）动态路由刷新路由失效问题

问题：

根据用户角色动态生成路由表，如果不刷新页面，一切操作正常。但是如果直接在浏览器地址栏更改网址，或者刷新页面，路由会失效，并自动定位到404页面。

原因：

页面刷新时，路由重新初始化，动态添加的路由此时已不存在，只有一些固定路由（比如登录页面）还在，所以出现了404的情况

解决一：

第一步：

在路由的全局导航router.beforeEach处做个判断，根据动态路由表（resRoute）的长度来判断页面是否是刷新。如果不为0，则表示第一次登陆，生成了动态路由，登录后会走匹配路由的方法，不会有问题;如果length为0，表示刷新页面，需要重新执行路由匹配，重新添加动态路由即可。

第二步：

不要把404页面定义在固定路由里，而是在动态路由挂载后，再router.push()404页面。这样刷新页面就不会再出现404跳转了。

var resRoute = []//根据用户角色生成的路由表，直接在router中定义，没有使用vuex
router.beforeEach((to, from, next) => {
  NProgress.start()
  document.title = `${to.meta.title}`
  const token = localStorage.getItem("oo")
  let roles = ["common"]
  if (!token && to.path !== '/login') {
    next('/login')
  } else {
    if (resRoute.length !== 0) {//判断动态路由表的长度是否为0
      next()
    } else {
      resRoute = handelRoutes(permissionRoutes[0].children, roles)
      resRoute.forEach(route => {
        router.addRoute(route)
      })
      router.addRoute({//向动态路由添加404页面
        path: '/404',
        name: '404',
        component: () => import( /* webpackChunkName: "404" */ '../views/404.vue'),
        meta: {
          title: '路径错误'
        }
      })
      router.addRoute({
        // path: "*", // 这样用，vue3已经不支持，得下面的方式
        path: "/:pathMath(.*)", // 此处需特别注意置于最底部
        redirect: "/404"
      })
      // 如果 addRoute 并未完成，路由守卫会一层一层的执行执行，直到 addRoute 完成，找到对应的路由
      next({
        ...to,
        replace: true
      })
    }
  }

但是这个方法有一个小问题，就是控制台会警告找不到页面路径，但目前没有什么其他影响。评论区有知道的同学，麻烦指正下。