vue清除动态路由的问题记录

更新时间：2023年10月18日 14:47:02 作者：✎﹏ℳ๓₯㎕

项目中往往都是添加动态路由，如何删除已经添加进来的路由往往被忽视，为此这里做一下记录，感兴趣的朋友跟随小编一起看看吧

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是白名单，

到此这篇关于vue清除动态路由的文章就介绍到这了,更多相关vue清除动态路由内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Vue.js做select下拉列表的实例(ul-li标签仿select标签)
下面小编就为大家分享一篇Vue.js做select下拉列表的实例(ul-li标签仿select标签)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-03-03
vue2.0使用Sortable.js实现的拖拽功能示例
本篇文章主要介绍了vue2.0使用Sortable.js实现的拖拽功能示例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
2017-02-02
vue beforeDestroy clearInterval清除定时器失效的解决
这篇文章主要介绍了vue beforeDestroy clearInterval清除定时器失效的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-06-06
Vue中使用的EventBus有生命周期
这篇文章主要介绍了Vue中使用的EventBus有生命周期的相关知识，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
2018-07-07
vue、uniapp中动态添加绑定style、class 9种实现方法
这篇文章主要介绍了vue、uniapp中动态添加绑定style、class 9种方法实现,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-09-09
vue项目中实现多文件上传功能实例代码
我们平时经常做的是上传文件,下面这篇文章主要给大家介绍了关于vue项目中实现多文件上传功能的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-11-11
Vue + iView实现Excel上传功能的完整代码
前一段时间项目经历了前端上传文件的过程，首先进入页面会展示默认的样子，选中要上传的excel文件，本文通过实例图文相结合给大家介绍的非常详细，需要的朋友参考下吧
2021-06-06
Vue中前后端使用WebSocket详细代码实例
websocket通信是很好玩的,也很有用的的通信方式,下面这篇文章主要给大家介绍了关于Vue中前后端使用WebSocket的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2023-03-03
vue几个常用跨域处理方式介绍
本篇文章给大家详细介绍了vue跨域处理问题的方式以及相关知识点介绍，对此有兴趣的朋友学习下。
2018-02-02
vue+Element-ui实现分页效果
这篇文章主要为大家详细介绍了vue+Element-ui实现分页效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-11-11