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

代码:

html 复制代码
  <!-- 侧边栏 -->
        <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>

路由:

javascript 复制代码
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 获取到当前路由的路径

javascript 复制代码
 handleMenuSelect(index) {
      const targetPath = '/' + index;
      
      // 判断目标路径是否与当前路径相同
      //通过 this.$route.path 获取到当前路由的路径
      if (this.$route.path === targetPath) {
        // 如果相同则不进行导航
        return;
      }
      
      // 否则进行导航
      this.$router.push({ path: targetPath });
    }
相关推荐
z落落2 分钟前
C# 数组属性和方法(Clear / Copy / IndexOf / LastIndexOf)
开发语言·javascript·c#
嘟嘟07177 分钟前
Python切片技巧×DeepSeek API:手把手教你打造智能商品文案生成器
前端·javascript
月月大王的3D日记15 分钟前
Three.js Day 4:材质初探(上)——Basic、Normal、Matcap、Depth 一口气认识四种
javascript
来自上海的这位朋友20 分钟前
浏览器里的实时对局同步:WildHunt 的 WebSocket、输入序号与服务端快照
前端·javascript·后端
遇事不決洛必達20 分钟前
【爬虫随笔】常见js混淆原理和特征
javascript·爬虫·逆向·js加密
吃炸鸡的前端28 分钟前
react-hook-from从入门到精通
前端·javascript·react.js
zzqssliu1 小时前
跨境独立站多端适配开发:多语言+多货币+跨平台同步技术实战
前端·javascript·php
Chengbei111 小时前
AI赋能Chrome MCP × JS逆向Skill自动化JS逆向助力挖洞与绕过实战(小白也能学会)
javascript·人工智能·chrome·网络安全·自动化·系统安全·安全架构
怕浪猫1 小时前
Electron 开发实战(五):文件系统与本地数据持久化全解
前端·javascript·electron
ze^02 小时前
Day05 APP应用&微信小程序&原生态开发&H5+Vue技术&封装打包&反编译抓包点
vue.js·微信小程序·小程序