vue3 使用addRoute动态添加路由,页面刷新就白屏解决办法
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
·
问题,通过接口动态添加路由,第一次从登录页跳转还是正常的,说明路由添加成功了,但是刷新后就白屏了,且控制台报错路由匹配不到,在项目的main.js,router和路由拦截器中添加了一大堆打印后发现,在控制台报错的时候,根本就没进入路由守卫。(具体我就不贴代码了,我添加的太多了)
要解决路由匹配不到的问题,首先我们应该拿到动态路由,但是以往在路由守卫里进行的动态路由初始化现在行不通,因为在进路由守卫之前,程序已经进行了路由匹配
首先在router文件夹下定义你处理路由数据的方法。路由守卫外先执行一遍路由初始化,注意我这里用了await,必须等接口数据处理完成
export const setupRouterHooks = async() => {
// 首先调用接口获取菜单列表并处理成需要的路由数组,addRoute添加路由也在这个方法中,这个按照各自的要求自己处理,这里就不具体贴代码了
await getMenuRoute()
router.beforeEach(async(to, from, next) => {
if (!token) {
next({ path: '/login' })
} else {
if (store.getters.menu.length === 0) {
await getMenuRoute()
}
next()
}
})
router.afterEach(to => {
......
})
}
然后就是挂载的时机,在main.js中的路由初始化也要修改一下,我这里是在router里写了一个方法,在main.js中调用。注意,这里也用了await,如果初始化还没完成,就已经挂载上了app也会匹配不到路由
// 在router/index.js中添加线面的方法
export const setupRouter = async (app) => {
// 路由钩子函数
await setupRouterHooks()
app.use(router)
}
// main.js
app.use(animate)
app.use(store)
//此处一定要用await,等路由信息处理完成后再挂载
await setupRouter(app)
app.use(VueUeditorWrap)
app.use(Vant)
app.mount('#app')
网上也有在路由拦截里用next({ …to, replace: true })替换next(),但是我这里依旧是没起作用,还死循环了,原因是路由没有匹配到,重新在进入一次路由守卫还是会重新再进入路由守卫,一直这样循环下去,所以排除了
以上是我的解决方法,仅供参考吧!
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
9e887079
[skip ci] 1 年前
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 1 年前
新一代开源开发者平台 GitCode,通过集成代码托管服务、代码仓库以及可信赖的开源组件库,让开发者可以在云端进行代码托管和开发。旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。
更多推荐


所有评论(0)