一个页面有多个导航栏跳转页面一定要有这三步

html 结构部分
 <el-menu
        :default-active="path"
        class="el-menu-vertical-demo"
        :unique-opened="true"
        @select="listChange"
      >
        <el-menu-item index="/index/aiIdentify/achievementWall">
          <i class="el-icon-document"></i>
          <span slot="title">成果墙</span>
        </el-menu-item>
        <el-menu-item index="/index/aiIdentify/onlineAIRecognition">
          <i class="el-icon-document"></i>
          <span slot="title">在线AI识别</span>
        </el-menu-item>
        <el-menu-item index="/index/aiIdentify/identifyRecord">
          <i class="el-icon-document"></i>
          <span slot="title">识别记录</span>
        </el-menu-item>
        <el-menu-item index="/index/aiIdentify/resultsRecord">
          <i class="el-icon-document"></i>
          <span slot="title">成果记录</span>
        </el-menu-item>
 </el-menu>
data() {
    return {
      path: '/index/aiIdentify/achievementWall',
    }
  }, 
created() {
    this.path = this.$route.path
  },
  watch: {
    $route(e) {
      this.path = e.path
    },
  },
  methods: {
      listChange(index, indexPath) {
      this.path = index
      if (this.$route.path !== this.path) {
        this.$router.push(this.path)
      }
    },  
  }

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐