重复导航到当前位置引起的。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 });}
相关文章:
重复导航到当前位置引起的。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"…...
如何在 Angular 中使用 Flex 布局
介绍 Flex Layout 是一个组件引擎,允许您使用 CSS Flexbox 创建页面布局,并提供一组指令供您在模板中使用。 该库是用纯 TypeScript 编写的,因此不需要外部样式表。它还提供了一种在不同断点上指定不同指令以创建响应式布局的方法。 在本教…...
通俗的讲解什么是机器学习之损失函数
想象一下,你在玩一个靶心射击的游戏,你的目标是尽可能让箭簇命中靶心。在这个游戏中,损失函数可以看作是测量你的箭簇与靶心距离的规则。损失函数的值越小,意味着你的箭簇离靶心越近,你的射击技能越好。 在机器学习中…...
快速搭建PyTorch环境:Miniconda一步到位
快速搭建PyTorch环境:Miniconda一步到位 🌵文章目录🌵 🌳一、为何选择Miniconda搭建PyTorch环境?🌳🌳二、Miniconda安装指南:轻松上手🌳🌳三、PyTorch与Minic…...
图灵日记之java奇妙历险记--抽象类和接口
目录 抽象类概念抽象类语法 接口概念规则使用特性实现多个接口接口的继承接口使用实例Clonable接口和深拷贝抽象类和接口的区别 Object类 抽象类 概念 在面向对象的概念中,所有对象都是通过类来描述的,但是反过来,并不是所有的类都是用来描绘对象的,如果一个类中没有包含足够…...
批量给元素添加进场动画;获取文本光标位置;项目国际化
批量给元素添加进场动画 api及参数参考:https://juejin.cn/post/7310977323484971071 简单实现: addAnimationClass(){//交叉观察器if (window?.IntersectionObserver) {//获取所有需要添加进场动画的元素,放到一个数组let items [...do…...
解决:docker创建Redis容器成功,但无法启动Redis容器、也无报错提示
解决:docker创建Redis容器成功,但无法启动Redis容器、也无报错提示 一问题描述:1.docker若是直接简单使用run命令,但不挂载容器数据卷等参数,则可以启动Redis容器2.docker复杂使用run命令,使用指定redis.co…...
Jlink+OpenOCD+STM32 Vscode 下载和调试环境搭建
对于 Mingw 的安装比较困难,国内的网无法正常在线下载组件, 需要手动下载 x86_64-8.1.0-release-posix-seh-rt_v6-rev0.7z 版本的软件包,添加环境变量,并将 mingw32-make.exe 名字改成 make.exe。 对于 OpenOCD,需要…...
单片机在物联网中的应用
单片机,这个小巧的电子设备,可能听起来有点技术性,但它实际上是物联网世界中的一个超级英雄。简单来说,单片机就像是各种智能设备的大脑,它能让设备“思考”和“行动”。由于其体积小、成本低、功耗低、易于编程等特点…...
16.Qt 工具栏生成
目录 前言: 技能: 内容: 1. 界面添加 2. 信号槽 功能实现 参考: 前言: 基于QMainWindow,生成菜单下面的工具栏,可以当作菜单功能的快捷键,也可以完成新的功能 直接在UI文件中…...
【Linux内核】从0开始入门Linux Kernel源码
🌈 博客个人主页:Chris在Coding 🎥 本文所属专栏:[Linux内核] ❤️ 前置学习专栏:[Linux学习]从0到1 ⏰ 我们仍在旅途 目录 …...
SQL Service 2008 的安装与配置
点击添加当前用户...
Apache POI | Java操作Excel文件
目录 1、介绍 2、代码示例 2.1、将数据写入Excel文件 2.2、读取Excel文件中的数据 🍃作者介绍:双非本科大三网络工程专业在读,阿里云专家博主,专注于Java领域学习,擅长web应用开发、数据结构和算法,初步…...
vue 学习definproperty方法
definproperty方法是Vue很重要的一个底层方法,掌握他的原理很重要,下面通过代码说明问题: <!DOCTYPE html> <html><head><meta charset"UTF-8" /><title>回顾Object.defineproperty方法</title&…...
react 实现路由拦截
简单介绍下项目背景,我这里做了一个demo,前端使用mock数据,然后实现简单的路由拦截,校验session是否包含用户作为已登录的依据,react-router-dom是v6。不像vue可以设置登录拦截beforeenter,react需要我们自…...
数据分析(一) 理解数据
1. 描述性统计(summary) 对于一个新数据集,首先通过观察来熟悉它,可以打印数据相关信息来大致观察数据的常规特点,比如数据规模(行数列数)、数据类型、类别数量(变量数目、取值范围…...
什么是 Flet?
什么是 Flet? Flet 是一个框架,允许使用您喜欢的语言构建交互式多用户 Web、桌面和移动应用程序,而无需前端开发经验。 您可以使用基于 Google 的 Flutter 的 Flet 控件为程序构建 UI。Flet 不只是“包装”Flutter 小部件,而是…...
多模态(三)--- BLIP原理与源码解读
1 BLIP简介 BLIP: Bootstrapping Language-Image Pre-training for Unified Vision-Language Understanding and Generation 传统的Vision-Language Pre-training (VLP)任务大多是基于理解的任务或基于生成的任务,同时预训练数据多是从web获…...
掌握高性能SQL的34个秘诀多维度优化与全方位指南
掌握高性能SQL的34个秘诀🚀多维度优化与全方位指南 本篇文章从数据库表结构设计、索引、使用等多个维度总结出高性能SQL的34个秘诀,助你轻松掌握高性能SQL 表结构设计 字段类型越小越好 满足业务需求的同时字段类型越小越好 字段类型越小代表着记录占…...
美国纳斯达克大屏怎么投放:投放完成需要多长时间-大舍传媒Dashe Media
陕西大舍广告传媒有限公司(Shaanxi Dashe Advertising Media Co., Ltd),简称大舍传媒(Dashe Media),是纳斯达克在中国区的总代理(China General Agent)。与纳斯达克合作已经有八年的…...
2025最权威的十大AI科研工具推荐
Ai论文网站排名(开题报告、文献综述、降aigc率、降重综合对比) TOP1. 千笔AI TOP2. aipasspaper TOP3. 清北论文 TOP4. 豆包 TOP5. kimi TOP6. deepseek 学术研讨范畴正在历经深度的变动,人工智能论文工具现身,极大地提高了…...
从平面到立体:用ImageToSTL将照片变为可触摸的3D模型
从平面到立体:用ImageToSTL将照片变为可触摸的3D模型 【免费下载链接】ImageToSTL This tool allows you to easily convert any image into a 3D print-ready STL model. The surface of the model will display the image when illuminated from the left side. …...
转行网络安全月薪20K,怎么做到的?
转行网络安全月薪2万,怎么做到的? 近年来,越来越多朋友寻找新的职业发展机会,开始将目光聚焦到了网络安全产业。 前两天吃饭跟一帮朋友闲聊,得知曾一起共事的运维同事找到新工作,入职了一家专门做网络安全…...
如何高效使用AutoHotkey编译器:Ahk2Exe完整指南与实战技巧
如何高效使用AutoHotkey编译器:Ahk2Exe完整指南与实战技巧 【免费下载链接】Ahk2Exe Official AutoHotkey script compiler - written itself in AutoHotkey 项目地址: https://gitcode.com/gh_mirrors/ah/Ahk2Exe 对于Windows自动化脚本开发者而言ÿ…...
图解RDMA内存安全:从L_Key/R_Key到Memory Window的钥匙与门禁
图解RDMA内存安全:钥匙与门禁的权限艺术 在数据中心的高速网络世界里,远程直接内存访问(RDMA)技术如同一位隐形的快递员,能够在服务器之间直接投递数据包裹,完全绕过CPU的繁琐签收流程。而确保这位"快…...
ARM架构ADD/AND指令详解与应用优化
1. ARM指令集基础与ADD/AND指令概述在嵌入式系统和移动计算领域,ARM架构凭借其高效能低功耗的特性占据主导地位。作为RISC(精简指令集计算机)架构的代表,ARM指令集的设计哲学是通过精简而高效的指令完成复杂任务。其中,…...
告别wx.startRecord!微信小程序录音功能保姆级教程(RecorderManager全解析)
微信小程序录音功能深度重构指南:从wx.startRecord到RecorderManager的完整迁移方案 在微信小程序开发生态中,音频处理能力一直是实现丰富交互体验的核心组件之一。随着技术架构的持续优化,微信团队对录音API进行了重大升级,用更现…...
STC8单片机按键事件处理代码实现
STC8单片机按键事件处理代码实现 【下载地址】STC8单片机按键事件处理代码实现 本仓库提供了一个用于STC8单片机的按键事件处理代码实现,支持按键的单击、双击和长按事件。该代码设计简洁,易于理解和移植,可以方便地应用于其他单片机平台。 …...
Xarray数据处理的隐藏神器:rioxarray实战,用SHP文件精准裁剪NetCDF气象数据
Xarray数据处理的隐藏神器:rioxarray实战,用SHP文件精准裁剪NetCDF气象数据 在气象、海洋和遥感领域,NetCDF格式的网格数据几乎是科研和业务工作中的标配。当我们面对全球或大区域的高分辨率数据集时,往往只需要提取其中某个特定区…...
NotebookLM多源文档交叉去重实战:基于BERT-Embedding相似度阈值调优(附可复用Python脚本)
更多请点击: https://intelliparadigm.com 第一章:NotebookLM多源文档交叉去重的核心挑战与价值定位 NotebookLM 作为 Google 推出的基于引用的 AI 笔记工具,其核心能力依赖于对用户上传文档的语义理解与跨文档关联。然而当用户导入多个来源…...
