亲宝软件园·资讯

展开

Vue使用addRoutes的问题 Vue项目中使用addRoutes出现问题的解决办法

code_fly 人气:0
想了解Vue项目中使用addRoutes出现问题的解决办法的相关内容吗,code_fly在本文为您仔细讲解Vue使用addRoutes的问题的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:vue使用addroutes,addroutes刷新,addroutes刷新页面路由,下面大家一起来学习吧。

前言

addRoutes官方介绍:

函数签名:

router.addRoutes(routes: Array<RouteConfig>)

动态添加更多的路由规则。参数必须是一个符合 routes 选项要求的数组。

这两天做vue后台权限管理系统的时候,发现使用vue提供的addRoute添加路由以后,会出现两个bug,一起来看看如何解决吧~

一、404页面

1. 出现的原因

使用vue提供的addRoutes添加了动态路由以后,404页面的路由设置不在路由的末尾了

2. 解决方案

将404页面的路由添加到动态路由的末尾

代码如下(示例):

// xxx => 用户有的动态路由数组
xxx.push({ path: '*', redirect: '/404', hidden: true })

// 动态添加路由配置
router.addRoutes(xxx)

二、刷新白屏

1. 出现原因

刷新时,动态路由没有加载完毕

2. 解决方案

路由添加完毕后,在进入页面

代码如下(示例):

if(用户的动态路由没有加载){
	// 解决刷新出现的白屏bug
  next({
    ...to, // next({ ...to })的目的,是保证路由添加完了再进入页面 (可以理解为重进一次)
    replace: true // 重进一次, 不保留重复历史
  })
} else {
	next()
}

三、路由重复

1.  出现原因

路由设置是通过router.addRoutes(xxx)来添加的,退出时,并没有清空,再次登陆,又加了一次,所以有重复。

2. 解决方案

代码如下(示例):

// 重置路由
export function resetRouter() {
  const newRouter = createRouter()
  router.matcher = newRouter.matcher // 重新设置路由的可匹配路径
}

这个方法就是将路由重新实例化,相当于换了一个新的路由,之前加的路由就不存在了,需要在登出的时候, 调用一下即可。

总结

加载全部内容

相关教程
猜你喜欢
用户评论