vue清除动态路由的问题记录
作者:✎﹏ℳ๓₯㎕
项目中往往都是添加动态路由,如何删除已经添加进来的路由往往被忽视,为此这里做一下记录,感兴趣的朋友跟随小编一起看看吧
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清除动态路由内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!