当前位置: 首页 > news >正文

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

http://www.lryc.cn/news/194408.html

相关文章:

  • rsyslog实现将日志存储到mysql中
  • 2015架构案例(五十一)
  • 亚马逊测评安全吗?
  • VS2022新建项目时没有ASP.NET Web应用程序 (.NET Framework)
  • TIA博途软件中如何设置在程序中自动显示变量的注释信息?
  • Hadoop3教程(一):Hadoop的定义、组成及全生态概览
  • 成为数据分析师要具备什么能力——功法篇(上)
  • 【MySQL】Java的JDBC编程
  • windows OpenCV(包含cuda)最简安装教程
  • Vue3 + Nodejs 实战 ,文件上传项目--实现文件批量上传(显示实时上传进度)
  • 狂砸40亿美元,亚马逊向OpenAI竞争对手Anthropic投资
  • 目标检测YOLO实战应用案例100讲-基于YOLOv5_tiny算法的路面裂缝智能检测
  • P5682 [CSP-J2019 江西] 次大值% 运算 set 去重的一道好题
  • vue3后台管理框架之API接口统一管理
  • 线性表的插入、删除和查询操作
  • 基于深度学习网络的疲劳驾驶检测算法matlab仿真
  • 【文件系统】Linux文件系统的基本存储机制
  • Outlook导入导出功能灰色,怎么解决
  • Chrome 同站策略(SameSite)问题
  • docker搭建nginx+php-fpm
  • 数据结构与算法---单调栈结构
  • Python爬虫:某书平台的Authorization参数js逆向
  • Android MediaCodec 框架 基于codec2
  • 【RocketMQ 系列三】RocketMQ集群搭建(2m-2s-sync)
  • Go TLS服务端绑定证书的几种方式
  • 【算法与数据结构】--高级算法和数据结构--排序和搜索
  • 【Java】jvm 元空间、常量池(了解)
  • Spring Boot自动加载
  • MPNN 模型:GNN 传递规则的实现
  • Flink kafka 数据汇不指定分区器导致的问题