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

news2024/11/27 4:39:57

代码: 

  <!-- 侧边栏 -->
        <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.coloradmin.cn/o/1448810.html

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

相关文章

深度学习-吴恩达L1W2作业

作业1&#xff1a;吴恩达《深度学习》L1W2作业1 - Heywhale.com 作业2&#xff1a;吴恩达《深度学习》L1W2作业2 - Heywhale.com 作业1 你需要记住的内容&#xff1a; -np.exp&#xff08;x&#xff09;适用于任何np.array x并将指数函数应用于每个坐标 -sigmoid函数及其梯度…

【教学类-16-02】20240214《数字卡片1-9(正方形)华光彩云_CNKI》

背景需求&#xff1a; 前期坐过长方形A4纸的数字卡片 【教学类-16-01】20221121《数字卡片9*2》&#xff08;中班)_数字卡片pdf-CSDN博客文章浏览阅读897次。【教学类-16-01】20221121《数字卡片9*2》&#xff08;中班)_数字卡片pdfhttps://blog.csdn.net/reasonsummer/artic…

B端系统从0到1:有几步,其中需求分析要做啥?

一款B系统从无到有都经历了啥&#xff0c;而其中的需求分析又要做什么&#xff1f;贝格前端工场给老铁们做一下分析&#xff0c;文章写作不易&#xff0c;如果咱们有界面设计和前端开发需求&#xff0c;别忘了私信我呦&#xff0c;开始了。 一、B端系统从0到1都有哪些要走的步骤…

第13章 网络 Page729~733 链式任务反应

链式任务反应 当io_service对象身上没有任务的时候&#xff0c;当前正在运行的run()过程就结束了。这时再往它身上添加任务&#xff0c;程序收不到任务完成事件。 如果本次任务完成后&#xff0c;run()函数退出前再添加一项或更多任务&#xff0c;这就叫链式任务。 在asio的…

日志监控须知

在这个领域,最流行的应该是ELK. ELK可以让收集日志,检索日志更加的简单,让定位日志问题更加的高效,在也不需要挨个登录服务器,然后用一堆Linux命令去搜索日志了. ELK ( Elasticsearch Logstash Kibana ) ELK架构: 各个微服务,通过某种机制把自己的日志交给Logstash 这里的某…

455. Assign Cookies(分发饼干)

题目描述 假设你是一位很棒的家长&#xff0c;想要给你的孩子们一些小饼干。但是&#xff0c;每个孩子最多只能给一块饼干。 对每个孩子 i&#xff0c;都有一个胃口值 g[i]&#xff0c;这是能让孩子们满足胃口的饼干的最小尺寸&#xff1b;并且每块饼干 j&#xff0c;都有一个…

代码随想录算法训练营Day25|回溯算法·组合总和III,电话号码的字母组合

组合总和III 题目&#xff1a;找出所有相加之和为n的k个数的组合。组合中只允许含有1-9的正整数&#xff0c;并且每种组合中不存在重复的数字。 组合变量个数为k个&#xff0c;和为n。简单思路是使用k重循环&#xff0c;一层层找出来&#xff0c;然后把每一层的数相加&#x…

数据库被人破解,删除数据,勒索

事情是这样的&#xff0c;我买了一台服务器自己部署项目玩儿玩儿&#xff0c;我的数据库运行在3306端口&#xff0c;密码没改&#xff0c;就是默认的123456&#xff0c;诡异的事情发生了&#xff0c;用了一段时间之后&#xff0c;数据库突然连接不上了&#xff0c;我一通操作猛…

【深度学习】“智能皮肤:深度学习驱动的‘智慧之眼‘应用如何革新皮肤病诊疗未来“

在一个不久的未来世界&#xff0c;医疗科技取得了惊人的突破。一款名为“智慧之眼”的神秘应用横空出世&#xff0c;它如同科幻小说中的神器&#xff0c;能够通过摄像头扫描皮肤病变&#xff0c;并借助深度学习技术迅速得出专业级别的诊断结果。这个革新性的故事始于一场科研马…

Sentinel 流控-链路模式

链路模式 A B C 三个服务 A 调用 C B 调用 C C 设置流控 ->链路模式 -> 入口资源是 A A、B 服务 package com.learning.springcloud.order.controller;import com.learning.springcloud.order.service.BaseService; import org.springframework.beans.factory.annotatio…

ClickHouse--05--MergeTree 表引擎

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 MergeTree 系列表引擎前言MergeTree 系列表引擎 --功能MergeTree 系列表引擎 --种类 1.MergeTree1.1MergeTree 建表语句&#xff1a;1.2 MergeTree 引擎表目录解析查…

【AI视野·今日Robot 机器人论文速览 第七十八期】Wed, 17 Jan 2024

AI视野今日CS.Robotics 机器人学论文速览 Wed, 17 Jan 2024 Totally 49 papers &#x1f449;上期速览✈更多精彩请移步主页 Daily Robotics Papers Safe Mission-Level Path Planning for Exploration of Lunar Shadowed Regions by a Solar-Powered Rover Authors Olivier L…

第13讲我创建的投票列表实现

新建我创建的投票页面 {"path": "pages/createVoteList/createVoteList","style": {"navigationBarTitleText": "我创建的投票"}}个人中心页面&#xff0c;加下 点击 “我创建的投票”跳转列表页面 goVoteList:function(){u…

ChatGPT高效提问—prompt实践(教师助手)

ChatGPT高效提问—prompt实践&#xff08;教师助手&#xff09; 下面来看看ChatGPT在教育领域有什么用途。 首先设定ChatGPT的角色为高中教师助手。 输入prompt: ChatGPT输出&#xff1a; ​ 教师助手的角色已经设置完成。下面通过几种不同的情景演示如何使用。 1.1.1 制定…

PhP+vue企业原材料采购系统_cxg0o

伴随着我国社会的发展&#xff0c;人民生活质量日益提高。互联网逐步进入千家万户&#xff0c;改变传统的管理方式&#xff0c;原材料采购系统以互联网为基础&#xff0c;利用php技术&#xff0c;结合vue框架和MySQL数据库开发设计一套原材料采购系统&#xff0c;提高工作效率的…

编译原理实验2——自上而下语法分析LL1(包含去消除左递归、消除回溯)

文章目录 实验目的实现流程代码运行结果测试1&#xff08;含公共因子&#xff09;测试2&#xff08;经典的ii*i文法&#xff0c;且含左递归&#xff09;测试3&#xff08;识别部分标识符&#xff09; 总结 实验目的 实现自上而下分析的LL1语法分析器&#xff0c;给出分析过程 …

快速搭建PyTorch环境:Miniconda一步到位

快速搭建PyTorch环境&#xff1a;Miniconda一步到位 &#x1f335;文章目录&#x1f335; &#x1f333;一、为何选择Miniconda搭建PyTorch环境&#xff1f;&#x1f333;&#x1f333;二、Miniconda安装指南&#xff1a;轻松上手&#x1f333;&#x1f333;三、PyTorch与Minic…

机器学习:ROC曲线笔记

ROC曲线&#xff08;Receiver Operating Characteristic Curve&#xff09;是一种用于评估二分类模型性能的图形化工具&#xff0c;主要用于展示在不同阈值&#xff08;Threshold&#xff09;下模型的真阳性率&#xff08;True Positive Rate&#xff0c;TPR&#xff09;和假阳…

洛谷C++简单题小练习day11—字母转换,分可乐两个小程序

day11--字母转换--2.14 习题概述 题目描述 输入一个小写字母&#xff0c;输出其对应的大写字母。例如输入 q[回车] 时&#xff0c;会输出 Q。 代码部分 #include<bits/stdc.h> using namespace std; int main() { char n;cin>>n;cout<<char(n-32)<…

STM32 7-8

目录 ADC AD单通道 AD多通道 DMA DMA转运数据 DMAAD多通道 ADC AD单通道 AD.c #include "stm32f10x.h" // Device header/*** brief 初始化AD所需要的所有设备* param 无* retval 无*/ void AD_Init(void) {RCC_APB2PeriphClockCmd(RCC_AP…