解决使用addRoutes后出现的一些小bug

刷新页面时的bug修复

(1)如果我们刷新浏览器，会发现跳到了404页面

(2)对于addRoute添加的路由，在刷新时会白屏

原因

现在我们的路由设置中的404页处在中间位置而不是所有路由的末尾了。

解决

把404页改到路由配置的最末尾就可以了

代码:

1. 从route/index.js中的静态路由中删除path:'*'这一项

   // 不需要特殊的权限控制就可以访问的页面
   export const constantRoutes = [
     {
       path: '/login',
       component: () => import('@/views/login/index'),
       hidden: true
     },
     
     // 把这行代码剪切走
   -  { path: '*', redirect: '/404', hidden: true }
   ]
   
   

在前置导航守卫获取个人信息的时候,把404页面添加到最后面

//arr===用户有的动态路由数组

arr.push(
{ path: '*', redirect: '/404', hidden: true }
)
router.addRoutes(arr)

解决刷新出现的白屏bug

也是在前置导航守卫上

if (!store.getters.userId) {
//!store.getters.userId 如果没有用户id

arr.push(
{ path: '*', redirect: '/404', hidden: true }
)
router.addRoutes(arr)

  // 解决刷新出现的白屏bug
  next({
    ...to, // next({ ...to })的目的,是保证路由添加完了再进入页面 (可以理解为重进一次)
    replace: true // 重进一次, 不保留重复历史
  })
 } else {
   next()
}

退出登录时重置路由

问题

退出后，再次登陆，发现菜单异常 （控制台有输出说路由重复）；

原因

路由设置是通过router.addRoutes(filterRoutes)来添加的，退出时，并没有清空，再次登陆，又加了一次，所以有重复。

需要将路由权限重置 (恢复默认) 将来登录后再次追加才可以，不然的话，就会重复添加

解决

我们的**router/index.js**文件，发现一个重置路由方法

// 重置路由
export function resetRouter() {
  const newRouter = createRouter()
  router.matcher = newRouter.matcher // 重新设置路由的可匹配路径
}

这个方法就是将路由重新实例化，相当于换了一个新的路由，之前**加的路由就不存在了，需要在登出的时候， 调用一下即可**

退出登陆的时候调用resetRouter()方法就能解决这个问题