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

重复导航到当前位置引起的。Vue Router 提供了一种机制,阻止重复导航到相同的路由路径。

代码: 

  <!-- 侧边栏 --><el-col :span="12" :style="{ 'width': '200px' }"><el-menu default-active="first" class="el-menu-vertical-demo" @select="handleMenuSelect"><el-menu-item index="first"><i class="el-icon-menu"></i><span slot="title">首页</span></el-menu-item><el-menu-item index="person"><i class="el-icon-menu"></i><span slot="title">个人中心</span></el-menu-item><el-menu-item index="score"><i class="el-icon-document"></i><span slot="title">个人成绩</span></el-menu-item><el-menu-item index="personal"><i class="el-icon-document"></i><span slot="title">成绩管理</span></el-menu-item><el-menu-item index="manage"><i class="el-icon-setting"></i><span slot="title">人员管理</span></el-menu-item></el-menu></el-col>
<script>
export default {methods: {handleMenuSelect(index) {this.$router.push({ path: '/' + index });}}
};
</script>

路由:

const routes = [{path: '/home',//路由地址name: 'home',component: home,//相对应的组件redirect: { name: "first" },children: [{path: '/first',name: 'first',component: first},{path: '/person',name: 'person',component: person},{path: '/personal',name: 'personal',component: personal},{path: '/score',name: 'score',component: score},{path: '/manage',name: 'manage',component: manage}]}]

目录 

 

解决方法:判断目标路径是否与当前路径相同

通过 this.$route.path 获取到当前路由的路径

 handleMenuSelect(index) {const targetPath = '/' + index;// 判断目标路径是否与当前路径相同//通过 this.$route.path 获取到当前路由的路径if (this.$route.path === targetPath) {// 如果相同则不进行导航return;}// 否则进行导航this.$router.push({ path: targetPath });}

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

相关文章:

  • 如何在 Angular 中使用 Flex 布局
  • 通俗的讲解什么是机器学习之损失函数
  • 快速搭建PyTorch环境:Miniconda一步到位
  • 图灵日记之java奇妙历险记--抽象类和接口
  • 批量给元素添加进场动画;获取文本光标位置;项目国际化
  • 解决:docker创建Redis容器成功,但无法启动Redis容器、也无报错提示
  • Jlink+OpenOCD+STM32 Vscode 下载和调试环境搭建
  • 单片机在物联网中的应用
  • 16.Qt 工具栏生成
  • 【Linux内核】从0开始入门Linux Kernel源码
  • SQL Service 2008 的安装与配置
  • Apache POI | Java操作Excel文件
  • vue 学习definproperty方法
  • react 实现路由拦截
  • 数据分析(一) 理解数据
  • 什么是 Flet?
  • 多模态(三)--- BLIP原理与源码解读
  • 掌握高性能SQL的34个秘诀多维度优化与全方位指南
  • 美国纳斯达克大屏怎么投放:投放完成需要多长时间-大舍传媒Dashe Media
  • 【MySQL】多表关系的基本学习
  • Springboot之接入gRPC
  • 2023年中国数据智能管理峰会(DAMS上海站2023):核心内容与学习收获(附大会核心PPT下载)
  • DS:八大排序之堆排序、冒泡排序、快速排序
  • Sora:继ChatGPT之后,OpenAI的又一力作
  • 阅读笔记(BMSB 2018)Video Stitching Based on Optical Flow
  • Ubuntu学习笔记-Ubuntu搭建禅道开源版及基本使用
  • 《苍穹外卖》知识梳理6-缓存商品,购物车功能
  • [NSSCTF]-Web:[SWPUCTF 2021 新生赛]easy_sql解析
  • vue3 codemirror yaml文件编辑器插件
  • 力扣经典题:环形链表的检测与返回