1.问题： 在使用beforeEach 进行拦截路由采用动态路由时，页面刚初始化时路由正常跳转但页面刷新后出现空白或者404

2.代码拦截

beforeEach((to, from, next) => {
   beforeEach(('/logon', from, next) => {
     next()  // 现在要去的地方不是 /home ， 因此放行
   }
}

3.出现场景

通过后端拿到路由数据，遍历路由数据通过router.addRoute一个个的添加，同时将路由数据通过vuex缓存起来，当页面刷新时，从缓存里拿出路由数据再重新添加，同时配合路由守卫来跳页面

4.注意事项

逻辑不当的情况下，很容易死循环

刷新页面后动态添加的路由页面空白

5.解决方案

此时就要使用next({ ...to, replace: true })来确保addRoute()时动态添加的路由已经被完全加载上去，一般是与添加动态路由时配合使用。

generateRoutes().then((accessRoutes: any) => {
      const hasRoute = router.hasRoute(to.name!)
      accessRoutes.forEach((route: any) => {
        if (!isHttp(route.path)) {
          router.addRoute(route) // 动态添加可访问路由表
        }
      })
      if (!hasRoute) {
        // 如果该路由不存在，可能是动态注册的路由，它还没准备好，需要再重定向一次到该路由
        next({ ...to, replace: true })
      } else {
        next()
      }
    })