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


    代码: 

    1. <el-col :span="12" :style="{ 'width': '200px' }">
    2. <el-menu default-active="first" class="el-menu-vertical-demo" @select="handleMenuSelect">
    3. <el-menu-item index="first">
    4. <i class="el-icon-menu">i>
    5. <span slot="title">首页span>
    6. el-menu-item>
    7. <el-menu-item index="person">
    8. <i class="el-icon-menu">i>
    9. <span slot="title">个人中心span>
    10. el-menu-item>
    11. <el-menu-item index="score">
    12. <i class="el-icon-document">i>
    13. <span slot="title">个人成绩span>
    14. el-menu-item>
    15. <el-menu-item index="personal">
    16. <i class="el-icon-document">i>
    17. <span slot="title">成绩管理span>
    18. el-menu-item>
    19. <el-menu-item index="manage">
    20. <i class="el-icon-setting">i>
    21. <span slot="title">人员管理span>
    22. el-menu-item>
    23. el-menu>
    24. el-col>
    25. <script>
    26. export default {
    27. methods: {
    28. handleMenuSelect(index) {
    29. this.$router.push({ path: '/' + index });
    30. }
    31. }
    32. };
    33. script>

    路由:

    1. const routes = [
    2. {
    3. path: '/home',//路由地址
    4. name: 'home',
    5. component: home,//相对应的组件
    6. redirect: { name: "first" },
    7. children: [
    8. {
    9. path: '/first',
    10. name: 'first',
    11. component: first
    12. },
    13. {
    14. path: '/person',
    15. name: 'person',
    16. component: person
    17. },
    18. {
    19. path: '/personal',
    20. name: 'personal',
    21. component: personal
    22. },
    23. {
    24. path: '/score',
    25. name: 'score',
    26. component: score
    27. },
    28. {
    29. path: '/manage',
    30. name: 'manage',
    31. component: manage
    32. }
    33. ]
    34. }
    35. ]

    目录 

     

    解决方法:判断目标路径是否与当前路径相同

    通过 this.$route.path 获取到当前路由的路径

    1. handleMenuSelect(index) {
    2. const targetPath = '/' + index;
    3. // 判断目标路径是否与当前路径相同
    4. //通过 this.$route.path 获取到当前路由的路径
    5. if (this.$route.path === targetPath) {
    6. // 如果相同则不进行导航
    7. return;
    8. }
    9. // 否则进行导航
    10. this.$router.push({ path: targetPath });
    11. }

  • 相关阅读:
    Ng DevUI 周下载量突破1000啦!
    初识Node.js与内置模块
    CentOS7安装Kafka_2.12-3.3.1集群及使用
    星空下的对话,有感
    Elasticsearch 快速开始
    Android Studio编译旧的app代码错误及解决方法
    SpringBoot整合ElasticSearch
    C++ programming: Linux server socket example
    万能在线预约小程序系统源码 适合任何行业在线预约小程序+预约到店模式 带完整的搭建教程
    子网计算:192.168.0.0/16是什么意思
  • 原文地址:https://blog.csdn.net/karlaofsky/article/details/136101296