动态路由问题的解决方案

318 阅读1分钟

1.页面刷新跳404

根本原因是新增路由时,默认404是前面的,当使用展开运算符,浅拷贝数组时,404路由默认实在前面的. 解决方案:在静态路由中把404页面的路由注释.在route.addRoutes最后添加404页面的路由

比如这样

router.addRoutes([...otherRoutes, { path: '*', redirect: '/404', hidden: true }])

2.页面刷新白屏.

根本原因:在你刷新页面时,route.addRoutes()这个方法是异步的.也就是说,你打开了页面但是路由并没有加载好.所有就出现了白屏

解决方案:在路由守卫出,让路由再来一次,给route.addRoutes()方法充足的时间加载路由

代码如下:

next({
          ...to,
          replace: true
        })