当前位置: 首页 > news >正文

重复导航到当前位置引起的。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 提供了一种机制,阻止重复导航到相同的路由路径。

代码&#xff1a; <!-- 侧边栏 --><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 是一个组件引擎&#xff0c;允许您使用 CSS Flexbox 创建页面布局&#xff0c;并提供一组指令供您在模板中使用。 该库是用纯 TypeScript 编写的&#xff0c;因此不需要外部样式表。它还提供了一种在不同断点上指定不同指令以创建响应式布局的方法。 在本教…...

通俗的讲解什么是机器学习之损失函数

想象一下&#xff0c;你在玩一个靶心射击的游戏&#xff0c;你的目标是尽可能让箭簇命中靶心。在这个游戏中&#xff0c;损失函数可以看作是测量你的箭簇与靶心距离的规则。损失函数的值越小&#xff0c;意味着你的箭簇离靶心越近&#xff0c;你的射击技能越好。 在机器学习中…...

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

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

图灵日记之java奇妙历险记--抽象类和接口

目录 抽象类概念抽象类语法 接口概念规则使用特性实现多个接口接口的继承接口使用实例Clonable接口和深拷贝抽象类和接口的区别 Object类 抽象类 概念 在面向对象的概念中,所有对象都是通过类来描述的,但是反过来,并不是所有的类都是用来描绘对象的,如果一个类中没有包含足够…...

批量给元素添加进场动画;获取文本光标位置;项目国际化

批量给元素添加进场动画 api及参数参考&#xff1a;https://juejin.cn/post/7310977323484971071 简单实现&#xff1a; addAnimationClass(){//交叉观察器if (window?.IntersectionObserver) {//获取所有需要添加进场动画的元素&#xff0c;放到一个数组let items [...do…...

解决:docker创建Redis容器成功,但无法启动Redis容器、也无报错提示

解决&#xff1a;docker创建Redis容器成功&#xff0c;但无法启动Redis容器、也无报错提示 一问题描述&#xff1a;1.docker若是直接简单使用run命令&#xff0c;但不挂载容器数据卷等参数&#xff0c;则可以启动Redis容器2.docker复杂使用run命令&#xff0c;使用指定redis.co…...

Jlink+OpenOCD+STM32 Vscode 下载和调试环境搭建

对于 Mingw 的安装比较困难&#xff0c;国内的网无法正常在线下载组件&#xff0c; 需要手动下载 x86_64-8.1.0-release-posix-seh-rt_v6-rev0.7z 版本的软件包&#xff0c;添加环境变量&#xff0c;并将 mingw32-make.exe 名字改成 make.exe。 对于 OpenOCD&#xff0c;需要…...

单片机在物联网中的应用

单片机&#xff0c;这个小巧的电子设备&#xff0c;可能听起来有点技术性&#xff0c;但它实际上是物联网世界中的一个超级英雄。简单来说&#xff0c;单片机就像是各种智能设备的大脑&#xff0c;它能让设备“思考”和“行动”。由于其体积小、成本低、功耗低、易于编程等特点…...

16.Qt 工具栏生成

目录 前言&#xff1a; 技能&#xff1a; 内容&#xff1a; 1. 界面添加 2. 信号槽 功能实现 参考&#xff1a; 前言&#xff1a; 基于QMainWindow&#xff0c;生成菜单下面的工具栏&#xff0c;可以当作菜单功能的快捷键&#xff0c;也可以完成新的功能 直接在UI文件中…...

【Linux内核】从0开始入门Linux Kernel源码

&#x1f308; 博客个人主页&#xff1a;Chris在Coding &#x1f3a5; 本文所属专栏&#xff1a;[Linux内核] ❤️ 前置学习专栏&#xff1a;[Linux学习]从0到1 ⏰ 我们仍在旅途 ​ 目录 …...

SQL Service 2008 的安装与配置

点击添加当前用户...

Apache POI | Java操作Excel文件

目录 1、介绍 2、代码示例 2.1、将数据写入Excel文件 2.2、读取Excel文件中的数据 &#x1f343;作者介绍&#xff1a;双非本科大三网络工程专业在读&#xff0c;阿里云专家博主&#xff0c;专注于Java领域学习&#xff0c;擅长web应用开发、数据结构和算法&#xff0c;初步…...

vue 学习definproperty方法

definproperty方法是Vue很重要的一个底层方法&#xff0c;掌握他的原理很重要&#xff0c;下面通过代码说明问题&#xff1a; <!DOCTYPE html> <html><head><meta charset"UTF-8" /><title>回顾Object.defineproperty方法</title&…...

react 实现路由拦截

简单介绍下项目背景&#xff0c;我这里做了一个demo&#xff0c;前端使用mock数据&#xff0c;然后实现简单的路由拦截&#xff0c;校验session是否包含用户作为已登录的依据&#xff0c;react-router-dom是v6。不像vue可以设置登录拦截beforeenter&#xff0c;react需要我们自…...

数据分析(一) 理解数据

1. 描述性统计&#xff08;summary&#xff09; 对于一个新数据集&#xff0c;首先通过观察来熟悉它&#xff0c;可以打印数据相关信息来大致观察数据的常规特点&#xff0c;比如数据规模&#xff08;行数列数&#xff09;、数据类型、类别数量&#xff08;变量数目、取值范围…...

什么是 Flet?

什么是 Flet&#xff1f; Flet 是一个框架&#xff0c;允许使用您喜欢的语言构建交互式多用户 Web、桌面和移动应用程序&#xff0c;而无需前端开发经验。 您可以使用基于 Google 的 Flutter 的 Flet 控件为程序构建 UI。Flet 不只是“包装”Flutter 小部件&#xff0c;而是…...

多模态(三)--- BLIP原理与源码解读

1 BLIP简介 BLIP: Bootstrapping Language-Image Pre-training for Unified Vision-Language Understanding and Generation 传统的Vision-Language Pre-training &#xff08;VLP&#xff09;任务大多是基于理解的任务或基于生成的任务&#xff0c;同时预训练数据多是从web获…...

掌握高性能SQL的34个秘诀多维度优化与全方位指南

掌握高性能SQL的34个秘诀&#x1f680;多维度优化与全方位指南 本篇文章从数据库表结构设计、索引、使用等多个维度总结出高性能SQL的34个秘诀&#xff0c;助你轻松掌握高性能SQL 表结构设计 字段类型越小越好 满足业务需求的同时字段类型越小越好 字段类型越小代表着记录占…...

美国纳斯达克大屏怎么投放:投放完成需要多长时间-大舍传媒Dashe Media

陕西大舍广告传媒有限公司&#xff08;Shaanxi Dashe Advertising Media Co., Ltd&#xff09;&#xff0c;简称大舍传媒&#xff08;Dashe Media&#xff09;&#xff0c;是纳斯达克在中国区的总代理&#xff08;China General Agent&#xff09;。与纳斯达克合作已经有八年的…...

解析 C++ 中的‘生存期保护’:利用生命周期注解规避 99% 的悬挂指针风险

解析 C 中的“生存期保护”&#xff1a;利用生命周期注解规避 99% 的悬挂指针风险尊敬的各位开发者&#xff0c;各位对 C 内存安全孜孜不倦的探索者们&#xff0c;大家好&#xff01;在 C 的广阔世界中&#xff0c;指针和引用以其强大的能力&#xff0c;赋予了我们对内存的直接…...

射频电路50Ω阻抗匹配原理与工程实践

射频电路中50Ω阻抗匹配的工程学解析1. 射频传输线阻抗标准的历史渊源1.1 同轴电缆的阻抗优化历程1929年贝尔实验室的系列实验揭示了同轴电缆的两个关键阻抗值&#xff1a;30欧姆可实现最大功率传输&#xff0c;77欧姆则对应最小传输损耗。这两个数值的算术平均值为53.5欧姆&am…...

feishu2md:飞书文档批量下载与Markdown转换解决方案

feishu2md&#xff1a;飞书文档批量下载与Markdown转换解决方案 【免费下载链接】feishu2md 一键命令下载飞书文档为 Markdown 项目地址: https://gitcode.com/gh_mirrors/fe/feishu2md 在团队协作和知识管理场景中&#xff0c;飞书文档已成为许多组织的核心工具。然而&…...

Mojo+Python混合部署案例深度拆解(从Jupyter到生产环境的无缝迁移全路径)

第一章&#xff1a;MojoPython混合部署案例深度拆解&#xff08;从Jupyter到生产环境的无缝迁移全路径&#xff09;Mojo 作为新兴的系统级编程语言&#xff0c;与 Python 生态天然兼容&#xff0c;为机器学习模型从探索性开发&#xff08;Jupyter Notebook&#xff09;迈向高吞…...

从零开始:如何用Python训练一个AI模型(超详细教程)

引言 人工智能&#xff08;AI&#xff09;——一个熟悉又神秘的词汇。我们常听说它可以生成诗歌、编写代码、创作艺术&#xff0c;甚至回答各种问题。然而&#xff0c;当你想亲手实现一个“AI 模型”时&#xff0c;却可能感到无从下手。这篇教程正是为你准备的&#xff0c;将带…...

MATLAB驱动的焊接机器人智能轨迹优化与动态仿真实践

1. 焊接机器人轨迹优化的技术挑战 焊接机器人在现代制造业中扮演着越来越重要的角色&#xff0c;但要让机器人焊得又快又好&#xff0c;可不是件简单的事。想象一下&#xff0c;你要用焊枪在复杂的三维曲面上画出一条完美的焊缝&#xff0c;既要保证焊接质量&#xff0c;又要避…...

WebLaTeX:重构LaTeX创作流程的颠覆式解决方案

WebLaTeX&#xff1a;重构LaTeX创作流程的颠覆式解决方案 【免费下载链接】WebLaTex A complete alternative for Overleaf with VSCode Web Git Integration Copilot Grammar & Spell Checker Live Collaboration Support. Based on GitHub Codespace and Dev contai…...

5分钟搞定fastANI安装与基因组比对:从conda安装到结果解读全流程

5分钟搞定fastANI安装与基因组比对&#xff1a;从conda安装到结果解读全流程 第一次接触基因组比对时&#xff0c;我被各种复杂的参数和晦涩的结果文件搞得晕头转向。直到发现了fastANI这个神器——它不仅能快速计算基因组间的平均核苷酸相似性&#xff08;ANI&#xff09;&am…...

SDMatte Web服务灰度发布:新模型版本AB测试与用户反馈闭环机制

SDMatte Web服务灰度发布&#xff1a;新模型版本AB测试与用户反馈闭环机制 1. 引言 在AI图像处理领域&#xff0c;模型迭代更新是持续提升服务质量的必经之路。SDMatte作为一款专注于高质量图像抠图的AI模型&#xff0c;近期完成了新版本SDMatte的研发工作。本文将详细介绍我…...

开发提效新组合:用Cursor生成代码片段,在快马一键集成与部署

最近在做一个数据整理的小工具时&#xff0c;发现了一个特别高效的工作流组合&#xff1a;先用Cursor快速生成核心代码片段&#xff0c;再用InsCode(快马)平台一键整合部署。整个过程就像搭积木一样顺畅&#xff0c;特别适合需要快速实现功能模块的场景。 需求分析 我们经常要处…...