vue清除动态路由

               项目中往往都是添加动态路由,如何删除已经添加进来的路由往往被忽视,为此这里做一下记录:

        查看vue-router路由文档 可以看出 Vue2中是通过matcher来进行重新赋值来进行清空的。

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;

而Vue3中没有关于matcher这个属性,这样一来,就需要自己通过循环遍历来清除路由,

const router = createRouter({
    routes,
    history: createWebHashHistory()
})
console.log(router.getRoutes());
 
//重置路由
export function resetRouter(){
    let routers = router.getRoutes()
	console.log(routers);
    routers.map((it:any)=>{
        if(!whiteList.includes(it.name)){
            router.removeRoute(it.name)
        }
    })
	console.log(routers);
}

** 注:whiteList是白名单,

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值