刷新页面出现404页面，解决了404之后又出现白屏问题

1)刷新页面出现404页面原因：

我们使用addRoutes动态添加路由的时候,404页处在中间位置而不是所有路由的末尾了。

解决方式:

将404页面路由放在最后

从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 }

]

在路由守卫permission.js文件中,使用router.addRoutes所在的页面中,定义404页面路径添加到动态配置路由信息中

2)解决白屏的问题

 也是在permission.js的路由守卫的文件中

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

全部代码:

import router from '@/router/index.js'
import store from '@/store/index.js'
import Nprogress from 'nprogress'
import { asyncRoutes } from '@/router/index.js'
import 'nprogress/nprogress.css'
router.beforeEach(async function(to, from, next) {
  // 跳转的进度条
  Nprogress.start()
  // 如有token 就不能回到login页面,其他的放行
  const token = store.state.user.token
  if (token) {
    if (to.path === '/login') {
      next('/')
    } else {
      // 路由守卫先获取信息存放在vuex与本地中,方便以后获取权限
      // 判断如果已经有了个人信息就不在跳转路由的时候在请求个人信息了
      if (!store.getters.userId) {
        // 没有个人信息就请求个人信息
        await store.dispatch('user/getUser')
        // 8个页面
        console.log('8个页面', asyncRoutes)
        console.log('当前用户的权限是:', store.state.user.userInfo.roles.menus)
        const menus = store.state.user.userInfo.roles.menus
        // 后端与前端约定,在8个页面中的childern[0]的name值相同就是有的权限
        // 我理解为menu是自己带有的权限信息,只要与8个这之中相符合,取出路由的path就好了
        // 过滤一下属于自己的动态路由
        const myAsyncRoutes = asyncRoutes.filter(obj => menus.includes(obj.children[0].name))
        // 404放在最后面
        const page404 = {
          path: '/404',
          component: () => import('@/views/404.vue')
        }
        myAsyncRoutes.push(page404)
        // 跳转路由的时候获取属于自己的权限页面
        router.addRoutes(myAsyncRoutes)
        store.commit('menu/setmenuList', myAsyncRoutes)

        // 解决掉404之后,在刷新出现白屏的问题
        next({
          ...to, // 目的是保证路由添加完在进入页面(可以理解为重进一次)
          replace: true // 重进不保留历史记录
        })
      } else {
        next()
      }
    }
  } else {
    const whiteList = ['/login', '/404']
    if (whiteList.includes(to.path)) {
      next()
    } else {
      router.push('/login')
      next()
    }
  }
  // 如果没有token,是白名单的可以放行,其他的回到login
})

router.afterEach(() => {
  Nprogress.done()
})