重复导航到当前位置引起的。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.hqwc.cn/news/468336.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Python算法题集_LRU 缓存

Python算法题集_LRU 缓存 题146&#xff1a;LRU 缓存1. 示例说明2. 题目解析- 题意分解- 优化思路- 测量工具 3. 代码展开1) 标准求解【队列字典】2) 改进版一【有序字典】3) 改进版二【双向链表字典】 4. 最优算法 本文为Python算法题集之一的代码示例 题146&#xff1a;LRU …

Java面试、进阶、实践一网打尽(由电子工业出版社出版)

Java面试、进阶、实践一网打尽 准备好应对Java开发的新挑战吗&#xff1f;我们为您精选了五本核心书籍&#xff0c;一站式满足您在Java面试准备、技能进阶和实战应用的需求。 这套书籍包括《Offer来了&#xff1a;Java面试核心知识点精讲&#xff08;第2版&#xff09;》、《…

电脑数据误删如何恢复?9 个Windows 数据恢复方案

无论您是由于软件或硬件故障、网络犯罪还是意外删除而丢失数据&#xff0c;数据丢失都会带来压力和令人不快。 如今的企业通常将其重要数据存储在云或硬盘上。但在执行其中任何一项操作之前&#xff0c;您很有可能会丢失数据。 数据丢失的主要原因是意外删除&#xff0c;任何…

python算法之 Dijkstra 算法

文章目录 基本思想&#xff1a;步骤&#xff1a;复杂度&#xff1a;注意事项&#xff1a;代码实现K 站中转内最便宜的航班 Dijkstra 算法是一种用于解决单源最短路径问题的经典算法。该问题的目标是找到从图中的一个固定顶点&#xff08;称为源点&#xff09;到图中所有其他顶点…

“从根到叶:深入理解堆数据结构“

一.堆的概念及实现 1.1堆的概念 在数据结构中&#xff0c;堆是一种特殊的树形数据结构。堆可以分为最大堆和最小堆两种类型。 最大堆&#xff1a;对于堆中的任意节点&#xff0c;其父节点的值都不小于它的值。换句话说&#xff0c;最大堆中的根节点是堆中的最大值。并且&…

坚持刷题|重建二叉树

文章目录 题目考察点代码实现实现总结扩展问题从前序和中序遍历中序列构建二叉树题目代码实现与后序实现的异同点 前序和后序可不可以唯一确定一棵二叉树呢&#xff1f; Hello&#xff0c;大家好&#xff0c;我是阿月。坚持刷题&#xff0c;老年痴呆追不上我&#xff0c;今天刷…

2024年危险化学品生产单位安全生产管理人员证考试题库及危险化学品生产单位安全生产管理人员试题解析

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 2024年危险化学品生产单位安全生产管理人员证考试题库及危险化学品生产单位安全生产管理人员试题解析是安全生产模拟考试一点通结合&#xff08;安监局&#xff09;特种作业人员操作证考试大纲和&#xff08;质检局&a…

Solidworks:剖切模型

剖切模型可以看清模型内部。今天设计了一个模型&#xff0c;试验一下如何剖切。 操作很方便&#xff0c;只需要点击一下零件模型上方的剖切按钮&#xff0c;立即就转入剖切视图。剖切后结果如下。 工程图纸中也可以展示剖面视图&#xff0c;操作方法是点击工程图工具页中的“…

Python教程57:海龟画图turtle画动态的流星雨,快让你女朋友看看

---------------turtle源码集合--------------- Python教程91&#xff1a;关于海龟画图&#xff0c;Turtle模块需要学习的知识点 Python教程51&#xff1a;海龟画图turtle画&#xff08;三角形、正方形、五边形、六边形、圆、同心圆、边切圆&#xff0c;五角星&#xff0c;椭…

论文阅读:GamutMLP A Lightweight MLP for Color Loss Recovery

这篇文章是关于色彩恢复的一项工作&#xff0c;发表在 CVPR2023&#xff0c;其中之一的作者是 Michael S. Brown&#xff0c;这个老师是加拿大 York 大学的&#xff0c;也是 ISP 领域的大牛&#xff0c;现在好像也在三星研究院担任兼职&#xff0c;这个老师做了很多这种类似的工…

【从零到Offer】MySQL最左匹配

前言 ​ 相信大家在日常开发时&#xff0c;也经常能听到“最左匹配”这个词&#xff0c;那么什么是最左匹配呢&#xff1f;本篇文章就带你一起探索“最左匹配”的神奇秘密。 什么是最左匹配 ​ 最左匹配&#xff0c;通常指的是最左前缀匹配原则&#xff0c;即MySQL在检索数据…

C++ 特殊类的实现

一、请设计一个类&#xff0c;不能被拷贝 拷贝只会放生在两个场景中&#xff1a;拷贝构造函数以及赋值运算符重载&#xff0c;因此想要让一个类禁止拷贝&#xff0c;只需让该类不能调用拷贝构造函数以及赋值运算符重载即可。 在C98中&#xff1a;将拷贝构造函数与赋值运算符重载…