vue3 使用addRoute动态添加路由,页面刷新就白屏解决办法

问题,通过接口动态添加路由,第一次从登录页跳转还是正常的,说明路由添加成功了,但是刷新后就白屏了,且控制台报错路由匹配不到,在项目的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(),但是我这里依旧是没起作用,还死循环了,原因是路由没有匹配到,重新在进入一次路由守卫还是会重新再进入路由守卫,一直这样循环下去,所以排除了

以上是我的解决方法,仅供参考吧!

你可能感兴趣的:(Vue,javascript,前端,vue.js)