vue清空动态路由(路由历史)

分享我最近做的一个后台项目,里面的侧边栏用动态路由生成的,但是会遇到路由重复添加这样的问题,想要解决这个问题的话其实很简单,就是再添加动态路由之前先清空路由,话不多说上代码。

let createRouter  = () => new Router({
  mode: 'history', //hash history后端支持可开,需配置nginx, 次模式下不会再返回404界面
  routes: constantRouterMap, // 路由路径
  scrollBehavior: () => ({ y: 0 }) // 在切换时定位路由滚动条的位置
});

const router = createRouter()

export function resetRouter () { //清空路由的方法
  const newRouter = createRouter()
  router.matcher = newRouter.matcher 
}
export default router;

在需要清空的路由的地方执行以下代码就可以了。

import {resetRouter} from './router';
resetRouter() //执行方法

这是我在网上看到的回答,然后才解决了Vue路由重复添加的问题,网上流传了很多清空路由记录的方法,都不彻底,甚至绝大部分都无法实现清空的功能!这个回答是唯一能解决我的问题的回答。

  • 2
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue 3中,当用户退出登录时,清空动态路由可以通过以下步骤来实现: 首先,我们需要在退出登录的方法中添加代码以清空动态路由。可以在退出登录的方法中使用`router`对象的`matcher`属性获取已注册的动态路由列表,然后通过使用`router`对象的`removeRoute`方法逐个删除这些动态路由。 代码示例: ```js methods: { logout() { // 清空动态路由 this.$router.matcher.getRoutes().forEach(route => { if (route.meta && route.meta.dynamic) { this.$router.removeRoute(route.name); } }); // 其他的退出登录操作... } } ``` 在上面的示例中,我们遍历已注册的所有路由,如果路由的`meta`属性中包含`dynamic`字段,表示该路由是我们需要清空动态路由,因此使用`removeRoute`方法来删除这个路由。 需要注意的是,在Vue 3中,`$router.removeRoute`方法被弃用,可以使用`$router.hasRoute`方法来判断路由是否存在,并使用`$router.removeRoute`方法来删除路由。 另外,我们还需要在退出登录成功后,将用户重定向到登录页面或其他页面,以便用户重新登录时能够重新加载动态路由。 最后,当我们用户重新登录后,可以根据用户角色或其他条件,重新生成动态路由并注册到路由器中,以便用户能访问他们有权限的页面。 综上所述,以上是在Vue 3中退出登录清空动态路由的一种实现方式。具体的代码可以根据项目需求进行调整和扩展。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值