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

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

相关文章

python-分享篇-五子棋

文章目录 代码效果 代码 """五子棋之人机对战"""import sys import random import pygame from pygame.locals import * import pygame.gfxdraw from checkerboard import Checkerboard, BLACK_CHESSMAN, WHITE_CHESSMAN, offset, PointSIZE 3…

JVM(1)基础篇

1 初始JVM 1.1 什么是JVM JVM 全称是 Java Virtual Machine&#xff0c;中文译名 Java虚拟机。JVM 本质上是一个运行在计算机上的程序&#xff0c;他的职责是运行Java字节码文件。 Java源代码执行流程如下&#xff1a; 分为三个步骤&#xff1a; 编写Java源代码文件。 使用…

Android实现底部导航栏方法(Navigation篇)

Navigation实现底部导航栏 前言导入和基本使用导入基础使用创建nav文件编辑Nav文件添加页面&#xff08;代码版&#xff09;添加页面&#xff08;图解版&#xff09; 创建导航动作 action创建action&#xff08;代码版&#xff09;创建action&#xff08;图解版&#xff09; 编…

评估与改进机器学习模型

Ml strategy 文章目录 Ml strategySingle Numble Evaluation Metricoptimizing and satisficing metricImproving model performanceTwo fundamentalReduce bias and varianceAvoidable biasvariance error analysiswaysIncorrectly labled examplesdiffenrent distributionsad…

「C++ 类和对象篇 12」static成员

目录 一、static成员是什么&#xff1f; 二、为什么需要static成员&#xff1f; 三、怎么使用static成员&#xff1f; 1. 定义static成员变量 2. 定义static成员函数 3. 访问static成员 四、特性 【面试题】 【总结】 一、static成员是什么&#xff1f; 被static修饰的类成…

品牌之门:概率与潜力的无限延伸

在品牌的世界里&#xff0c;每一个成功的推广都像是打开一扇门&#xff0c;从未知走向已知&#xff0c;从潜在走向显现。这扇门&#xff0c;既是品牌的起点&#xff0c;也是品牌发展的无限可能。 品牌&#xff0c;就像一扇紧闭的门&#xff0c;它静静地矗立在那里&#xff0c;…

微信强制分享红包裂变系统源码

这是一款新型的微信裂变引流系统源码&#xff0c;支持试看、直播、朋友圈转发、分享任务、 邀请入群、群聊、红包等多种裂变引流方式&#xff0c;让你的广告流量引流、吸粉变现更加高效。 该系统源码还优化了整个页面&#xff0c;减少了繁重多余的代码&#xff0c;让访问速度…

【51单片机】直流电机驱动(PWM)(江科大)

1.直流电机介绍 直流电机是一种将电能转换为机械能的装置。一般的直流电机有两个电极,当电极正接时,电机正转,当电极反接时,电机反转 直流电机主要由永磁体(定子)、线圈(转子)和换向器组成 除直流电机外,常见的电机还有步进电机、舵机、无刷电机、空心杯电机等 2.电机驱动…

如何在 Angular 中使用变更检测策略

简介 默认情况下&#xff0c;Angular 2 会在应用程序中的每次变化时对所有组件&#xff08;从上到下&#xff09;执行变更检测。变化可以来自用户事件或者从网络请求接收到的数据。 变更检测非常高效&#xff0c;但随着应用程序变得更加复杂并且组件数量增加&#xff0c;变更…

对(一维)数组与指针的深入理解(1)

目录 1.数组名的理解2.使用指针访问&#xff08;一维&#xff09;数组3.&#xff08;一维&#xff09;数组传参的本质 1.数组名的理解 以前我们在使用指针访问数组内容时&#xff0c;有这样的代码&#xff1a; #include <stdio.h>int main() {int arr[10] { 1,2,3,4,5…

详解Qt多线程(包含:什么是CPU,单核处理器和多核处理器,举餐厅和QQ音乐的例子详解进程和线程,Qt多线程案例)

目录 一.什么是CPU&#xff1f;二.单核处理器与多核处理器三.什么是进程和线程&#xff1f;3.1 定义3.2 以餐厅为例子解释进程和线程3.2 以QQ音乐为例子&#xff0c;解释QQ音乐里面的进程和线程 四.Qt中的多线程五.Qt多线程案例任务描述案例演示设置显示内容的字体大小和位置运…

pands常用操作

1.导入库和文件读取和文件分信息分析 import pandas as pd import numpy as np csvf pd.read_csv(D:/各个站程序版本说明.csv) csvf.info() <class pandas.core.frame.DataFrame> RangeIndex: 51 entries, 0 to 50 Data columns (total 6 columns):# Column Non-Nul…

java面试题整理

2023.2.14&#xff08;第二天&#xff09; 数组是不是对象&#xff1f; 在Java中&#xff0c;数组是对象。数组是一种引用类型&#xff0c;它可以存储固定大小的相同类型的元素序列。在Java中&#xff0c;数组是通过new关键字创建的&#xff0c;它们在内存中被分配为对象&…

Java 中 Hashtable和ConcurrentHashMap的区别

Hashtable和ConcurrentHashMap的区别 Hashtable 和 ConcurrentHashMap 都是 Java 中的集合框架中的 Map 接口实现类&#xff0c;但它们之间有很大的不同&#xff0c;特别是在多线程环境中。下面是它们之间的一些主要区别&#xff1a; 线程安全性&#xff1a; Hashtable 是线程…

<网络安全>《30 网络信息安全基础(1)常用术语整理》

1 肉鸡 所谓“肉鸡”是一种很形象的比喻&#xff0c;比喻那些可以随意被我们控制的电脑&#xff0c;对方可以是WINDOWS系统&#xff0c;也可以是UNIX/LINUX系统&#xff0c;可以是普通的个人电脑&#xff0c;也可以是大型的服务器&#xff0c;我们可以象操作自己的电脑那样来操…

网络世界的基石:深入探索OSI 7层模型的奥秘

引言 在当今互联网和计算机网络的复杂体系中&#xff0c;OSI&#xff08;开放系统互连&#xff09;参考模型提供了一个理解和设计网络通信协议的框架。自1984年由国际标准化组织&#xff08;ISO&#xff09;提出以来&#xff0c;OSI 7层模型已成为网络通信中最基本的概念之一。…

re:从0开始的CSS之旅 15. 浮动

1. 浮动 浮动&#xff1a;使元素浮起来&#xff0c;脱离文档流&#xff0c;从而使盒子能够灵活的移动。 浮动的属性&#xff1a; float 属性设置元素的浮动 可选值&#xff1a; none 元素不浮动&#xff0c;默认在文档流中排列&#xff08;默认值&#xff09; left 元素向左移…

「数据结构」MapSet

&#x1f387;个人主页&#xff1a;Ice_Sugar_7 &#x1f387;所属专栏&#xff1a;Java数据结构 &#x1f387;欢迎点赞收藏加关注哦&#xff01; Map&Set &#x1f349;概念&#x1f349;模型&#x1f349;Map&#x1f34c;TreeMap和HashMap的区别&#x1f34c;Map常用方…

2048游戏C++板来啦!

个人主页&#xff1a;PingdiGuo_guo 收录专栏&#xff1a;C干货专栏 大家好呀&#xff0c;我是PingdiGuo_guo&#xff0c;今天我们来学习如何用C编写一个2048小游戏。 文章目录 1.2048的规则 2.步骤实现 2.1: 初始化游戏界面 2.1.1知识点 2.1.2: 创建游戏界面 2.2: 随机…

嵌入式培训机构四个月实训课程笔记(完整版)-Linux ARM驱动编程第二天-ARM按键1*3矩阵键盘编程 (物联技术666)

链接&#xff1a;https://pan.baidu.com/s/1E4x2TX_9SYhxM9sWfnehMg?pwd1688 提取码&#xff1a;1688 1、键盘1*3的中断程序 //************************************************ #include "2440addr.h" #include "2440lib.h" #include &…