导航栏跳转页面[通俗易懂]

导航栏跳转页面[通俗易懂]一个页面有多个导航栏跳转页面一定要有这三步html结构部分<el-menu:default-active=”path”class=”el-menu-vertical-demo”:unique-opened=”true”@select=”listChange”><el-menu-itemindex=”/index/aiIdentify/achievementWall”>

大家好,又见面了,我是你们的朋友全栈君。

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

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)
      }
    },  
  }

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/139118.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • SchedulerFactoryBean 注入

    SchedulerFactoryBean 注入今天在做SpringQuarter动态设置触发时间时,需要在Service中注入org.springframework.scheduling.quartz.SchedulerFactoryBean使用下面的代码可用:localQuartzScheduler通过注解注入@Resource privateSchedulerFactoryBeanlocalQuartzScheduler

    2022年5月24日
    35
  • https://sweetalert2.github.io/

    https://sweetalert2.github.io/

    2022年3月13日
    82
  • 拉链表的展开算法_如何求展开式的系数

    拉链表的展开算法_如何求展开式的系数在做数据仓库项目的过程中,有时候可能也会根据历史拉链表,展开为每天全量表;相当于一个还原的过程,即构建拉链表的反过程。1、建表及插入测试数据语句 –建表语句–生成EDW_T00_H表(历史拉链表)–CreatetablecreatetableEDW_T00_H(IDVARCHAR2(2)notnull,…

    2022年10月16日
    35
  • Java学习路线图(完整详细2021版)

    Java学习路线图(完整详细2021版)作为一个男人我感觉必须得做点什么来证明一下自己,现在我又回来了,准备把自己的节操准备补一下 另外给各位未来的Java程序员说一句,别的我不清楚,学习编程请从一而终 咱们学习编程就挺难的,有这些先驱者来带领咱们学习,咱们应该感激,而且最重要的事跟着你选定的一家一直学下去 因为每家学校的学习大纲都是不一样的,但是程序员其实都是一样的,这句话你细品!仔细的品! 我不希望你忙忙碌碌的整理那么多东西,挑肥拣瘦的,最后自己学的东西还是缺失的,要不就…

    2022年5月17日
    87
  • 网页在线视频下载教程(m3u8格式介绍及下载教程)「建议收藏」

    简介:m3u8文件是苹果公司使用的HTTPLiveStreaming(HLS)协议格式的基础。HLS是新一代流媒体传输协议,其基本实现原理为将一个大的媒体文件进行分片,将该分片文件资源路径记录与m3u8文件(即playlist)内,其中附带一些额外描述(比如该资源的多带宽信息等…)用于提供给客户端。客户端依据该m3u8文件可获取对应的媒体资源,进行播放。因此,客户端获取HLS流文件,主…

    2022年4月4日
    120
  • oracle错误904解决方法_oracle导出数据库命令

    oracle错误904解决方法_oracle导出数据库命令今天在导数据库遇到了奇怪的问题C:\DocumentsandSettings\noah>expsystem/pd0000@orclfile=d:\data.dmpwner=devlog=d:\log.log.即将导出DEV的表通过常规路径…..正在导出表B_COMMON_BOXEXP-00008:遇到ORACLE错误9…

    2026年2月3日
    6

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号