重复导航到当前位置引起的。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 });
    }

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/387476.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

linux内核原理--用户态线性地址空间,mmap,malloc,缺页异常

1.概述 前面我们介绍了内核态线性地址空间划分&#xff0c;及在内核态运行时&#xff0c;如何利用伙伴系统完成连续可用物理页框申请和释放。如何利用小块内存分配器实现高效的动态内存分配和释放。如何利用vmalloc&#xff0c;vfree完成线性地址连续但物理地址不连续的多个页框…

MATLAB|基于改进二进制粒子群算法的含需求响应机组组合问题研究(含文献和源码)

目录 主要内容 模型研究 1.改进二进制粒子群算法&#xff08;BPSO&#xff09; 2.模型分析 结果一览 下载链接 主要内容 该程序复现《A Modified Binary PSO to solve the Thermal Unit Commitment Problem》&#xff0c;主要做的是一个考虑需求响应的机组组合…

【AI视野·今日Robot 机器人论文速览 第七十九期】Thu, 18 Jan 2024

AI视野今日CS.Robotics 机器人学论文速览 Thu, 18 Jan 2024 Totally 43 papers &#x1f449;上期速览✈更多精彩请移步主页 Daily Robotics Papers CognitiveDog: Large Multimodal Model Based System to Translate Vision and Language into Action of Quadruped Robot Aut…

探索微信小程序的奇妙世界:从入门到进阶

文章目录 一、什么是微信小程序1.1 简要介绍微信小程序的定义和特点1.2 解释小程序与传统应用程序的区别 二、小程序的基础知识2.1 微信小程序的架构2.2 微信小程序生命周期的理解2.3 探索小程序的目录结构和文件类型 三、小程序框架和组件3.1 深入了解小程序框架的核心概念和原…

ZISUOJ 2022年算法基础公选课练习四(Map)

说明&#xff1a; 博主为了提早预习数据结构和C的一些知识&#xff0c;自己琢磨外加查阅资料所写的代码&#xff0c;题目来源于22年初的学院老师组织的算法基础公选课的练习。我的代码甚至思路肯定存在许多不足和错误&#xff0c;欢迎大家批评指正。 题目列表&#xff1a; 问题…

Python Matplotlib 的学习笔记

Python Matplotlib 的学习笔记 0. Python Matplotlib 简介1. 为什么要用 Matplotlib&#xff1f;2. Matplotlib 基础类详解2-1. Line&#xff08;线&#xff09;2-2. Marker&#xff08;标记&#xff09;2-3. Text&#xff08;文本&#xff09;2-4. Legend&#xff08;图例&…

安卓价值1-如何在电脑上运行ADB

ADB&#xff08;Android Debug Bridge&#xff09;是Android平台的调试工具&#xff0c;它是一个命令行工具&#xff0c;用于与连接到计算机的Android设备进行通信和控制。ADB提供了一系列命令&#xff0c;允许开发人员执行各种操作&#xff0c;包括但不限于&#xff1a; 1. 安…

5种风格非常经典的免费wordpress主题

免费wordpress主题下载 高端大气上档次的wordpress主题&#xff0c;也可以是免费的&#xff0c;可以在线免费下载。 https://www.wpniu.com/themes/288.html wordpress免费主题 高端大气的wordpress免费主题&#xff0c;LOGO在顶部左侧&#xff0c;导航菜单在顶部右侧。 ht…

如何流畅进入Github

前言 以下软件是免费的&#xff0c;放心用 一、进入右边的下载链接https://steampp.net/ 二、点击下载 三、点击接受并下载 四、随便选一个下载链接进行下载 五、软件安装好打开后&#xff0c;找到Github 六、点击全部启用 七、再点击左上角的一键加速 八、这个时候你再进Git…

idea启动不起来

把进程杀了就好了 taskkill /pid 9744 -f

支付交易——跨境交易

摘要 老王兢兢业业经营生意多年&#xff0c;一步步从小杂货店做到现在&#xff0c;成立大型贸易公司。在做大做强的过程中&#xff0c;老王觉得国内市场已经饱和&#xff0c;竞争处处是红海。老王留意海外很多年了&#xff0c;决定走出去&#xff0c;转向海外:将国外的商品引进…

腾讯云4核8G服务器3年600元?

腾讯云4核8G服务器3年600元&#xff1f;目前的价格是轻量应用服务器4核8G12M带宽一年446元、646元15个月&#xff0c;云服务器CVM标准型S5实例4核8G配置价格15个月1437.3元&#xff0c;5年6490.44元&#xff0c;标准型SA2服务器1444.8元一年&#xff0c;在txy.wiki可以查询详细…

坚持刷题|重建二叉树

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

机器学习12-基本感知器

感知器(Perceptron)是一种最简单的人工神经网络结构,由美国心理学家Frank Rosenblatt在1957年提出。它是一种单层的前馈神经网络,通常用于二分类问题。 基本感知器由多个输入节点、一个输出节点和一组权重参数组成。每个输入节点都与输出节点连接,并且具有一个对应的权重参…

尚硅谷最新Node.js 学习笔记(一)

目录 一、Nodejs入门 1.1、为什么要学习Nodejs&#xff1f; 1.2、Nodejs是什么&#xff1f; 1.3、Nodejs的作用 1.4、Nodejs安装 1.5、Nodejs初体验 1.6、编码注意事项 二、Buffer&#xff08;缓冲器&#xff09; 2.1、概念 2.2、特点 2.3、使用 创建Buffer Buffe…

【AI视野·今日CV 计算机视觉论文速览 第299期】Mon, 29 Jan 2024

AI视野今日CS.CV 计算机视觉论文速览 Mon, 29 Jan 2024 Totally 55 papers &#x1f449;上期速览✈更多精彩请移步主页 Daily Computer Vision Papers Annotated Hands for Generative Models Authors Yue Yang, Atith N Gandhi, Greg TurkGAN 和扩散模型等生成模型已经展示了…

如何用 ChatGPT 做项目管理?

ChatGPT 可以通过创建和维护跨团队项目协作计划&#xff0c;让员工更容易理解他们的角色和职责。 这个协作计划里面会包括每个团队或个人要执行的具体任务&#xff0c;每个任务最后期限和任何事情之 间的依赖关系。 该场景对应的关键词库:(24 个) 项目管理、项目协作计划、跨…

数学实验第三版(主编:李继成 赵小艳)课后练习答案(十)(2)(3)

实验十&#xff1a;非线性函数极值求解 练习二 1.求解极值问题: (1) s.t. function [c,ceq]fun(x) c(1)-(25-x(1)^2-x(2)^2); c(2)-(7-x(1)^2x(2)^2); ceq0;换一个窗口运行下面的程序&#xff1a; clc;clear; f(x)-2*x(1)-x(2); a[]; b[]; aeq[];beq[]; u[5;10]; l[0;0];…

AI换脸离线本地版-讲解2

嘿&#xff0c;准备好了吗&#xff1f;我来给你幽默地讲解下AI换脸&#xff01; 所谓AI换脸&#xff0c;就是让你变成“百变小萝莉”或者“花心大少爷”一样&#xff0c;只需一键操作&#xff0c;就能把你的脸魔法般地贴到别人脸上&#xff0c;就像是面部贴纸一样。你可以秒变…

智慧园区的可视化大屏,比你见过的更漂亮。

智慧园区云平台的建设旨在建立统一的工作流程&#xff0c;协同、调度和共享机制&#xff0c;以云平台为枢纽&#xff0c;形成一个紧密联系的整体&#xff0c;获得高效、协同、互动、整体的效益。