刷新页面到404页面的bug修复

问题

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

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

原因

刷新浏览器，会发现跳到了404页面

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

解决

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

代码

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

   // 不需要特殊的权限控制就可以访问的页面
   export const constantRoutes = [
     {
       path: '/login',
       component: () => import('@/views/login/index'),
       hidden: true
     },
     
     // 404 page must be placed at the end !!!
    // 删除这一项
   -  { path: '*', redirect: '/404', hidden: true }
   ]
   ​
   

2. 在路由导航守卫中补充在最后

// if(没有userInfo) {
if (!store.getters.userId) {
  // 有token,要去的不是login，就直接放行
  // 进一步获取用户信息
  // 发ajax---派发action来做
  const menus = await store.dispatch('user/getUserInfo')
  console.log('当前用户能访问的页面', menus)
  console.log('当前系统功能中提供的所有的动态路由页面是', asyncRoutes)
  // 根据本用户实际的权限menus去 asyncRoutes 中做过滤，选出本用户能访问的页面

  const filterRoutes = asyncRoutes.filter(route => {
    const routeName = route.children[0].name
    return menus.includes(routeName)
  })

  // 一定要在进入主页之前去获取用户信息

  // 把404加到最后一条
+  filterRoutes.push( // 404 page must be placed at the end !!!
    { path: '*', redirect: '/404', hidden: true })

  // addRoutes用来动态添加路由配置
  // 只有在这里设置了补充了路由配置，才可能去访问页面
  // 它们不会出现左侧
  router.addRoutes(filterRoutes)

  // 把它们保存在vuex中，在src\layout\components\Sidebar\index.vue
  // 生成左侧菜单时，也应该去vuex中拿
  store.commit('menu/setMenuList', filterRoutes)
  
 // 解决白屏问题
+  next({
   // next({ ...to })的目的,是保证路由添加完了再进入页面 (可以理解为重进一次)
    ...to,
    // 重进一次, 不保留重复历史
    replace: true // 重进一次, 不保留重复历史
  })
  加上else不然就是next()两次
+ } else {
  next()
}