vue 路由跳转未匹配相应路由后，出现空白页面，指向404页面

1、比如我是写在根目录的：

 

 

 2、点击跳转到没权限的路由(因为没权限，该路由找不到，显示空白页)：

3、路由守卫如下：

router.beforeEach((to, from, next) => {
  const hasToken = getToken();
  // console.log(hasToken)
  // console.log('length=' + getRouter.length)
  if(!getObjArr('router')) {
    getRouter = []
    // console.log(getRouter)
  }
  // console.log(getRouter);  // 后端路由
  if (getRouter.length === 0) { // 不加这个判断，路由会陷入死循环
    if (!getObjArr('router')) {
      if (to.path === '/login' || from.path === '/dashboard' || from.path === '/') { // 若用户已经登录，则重定向到主页
        // || from.fullPath === '/' || from.fullPath === '/dashboard'
        }
      else {
　　　　　　//获取路由接口
        getMenu().then(res => {
          var conet = []
          var head = []
          res.menu.forEach((items, index) => {
            items.meta = {
              title: items.name,
              icon: 'dashboard'  // items.icon
            }
            if (items.parentId) {
              conet.push(items)
            } else {
              items.children = []
              head.push(items)
            }
          })
          head.forEach((items, index) => {
            conet.forEach((item, index) => {
              if (items.id === item.parentId) {
                items.children.push(item)
              }
            })
          })
          getRouter = head
          saveObjArr('router', getRouter)
          routerGo(to, next)
          // location.reload()
        }).catch(() => {
        })
      }
    } else { // 从localStorage拿到了路由
      getRouter = getObjArr('router') // 拿到路由
      routerGo(to, next)
    }
  } else {
    next()
  }

4、此时无权限路由跳转为空白页，需要添加如下(此时未匹配到的路由，会跳转到404页面)：

} else if(to.matched.length === 0) {
    from.path? next({ path: '*', redirect: '/404', hidden: true }) : next('/');  //404页面内容可以自定义
  } else {
    next()
  }

 

注：每个人的路由守卫页面、路由写法等都不一样，所以该博客仅供参考！