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

最近更新

  1. TCP协议是安全的吗?

    2024-02-15 11:36:05       19 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-02-15 11:36:05       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-02-15 11:36:05       19 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-02-15 11:36:05       20 阅读

热门阅读

  1. C#面:Static Nested Class 和 Inner Class 有什么不同

    2024-02-15 11:36:05       26 阅读
  2. 【网络层介绍】

    2024-02-15 11:36:05       23 阅读
  3. DS Wannabe之5-AM Project: DS 30day int prep day14

    2024-02-15 11:36:05       31 阅读
  4. 记录 | anaconde conda安装清华源

    2024-02-15 11:36:05       26 阅读
  5. #include<初见c语言的猜数字游戏>

    2024-02-15 11:36:05       27 阅读
  6. Rust入门4——基本编程概念

    2024-02-15 11:36:05       30 阅读
  7. python Flask与微信小程序 统计管理

    2024-02-15 11:36:05       31 阅读
  8. 「数据结构」哈希表2:实现哈希表

    2024-02-15 11:36:05       37 阅读
  9. React:高阶组件|ref转发

    2024-02-15 11:36:05       39 阅读