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(),但是我这里依旧是没起作用,还死循环了,原因是路由没有匹配到,重新在进入一次路由守卫还是会重新再进入路由守卫,一直这样循环下去,所以排除了

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

相关推荐

  1. Vue3-40-- 动态

    2023-12-23 10:14:03       29 阅读
  2. vue3如何实现动态

    2023-12-23 10:14:03       44 阅读
  3. vue3动态

    2023-12-23 10:14:03       18 阅读

最近更新

  1. TCP协议是安全的吗?

    2023-12-23 10:14:03       18 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2023-12-23 10:14:03       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2023-12-23 10:14:03       18 阅读
  4. 通过文章id递归查询所有评论(xml)

    2023-12-23 10:14:03       20 阅读

热门阅读

  1. 做接口测试时需要验证数据库么?

    2023-12-23 10:14:03       38 阅读
  2. Linux中硬盘(IDE、SCSI)的命名规则

    2023-12-23 10:14:03       41 阅读
  3. ceph集群搭建详细教程(ceph-deploy)

    2023-12-23 10:14:03       36 阅读
  4. MAC 安装nginx

    2023-12-23 10:14:03       35 阅读
  5. cmake常用函数

    2023-12-23 10:14:03       31 阅读
  6. log4j日志切割原理

    2023-12-23 10:14:03       36 阅读
  7. USACO21JAN Minimum Cost Paths P

    2023-12-23 10:14:03       43 阅读