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

导航栏跳转页面[通俗易懂]一个页面有多个导航栏跳转页面一定要有这三步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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • math.random()随机整数_随机函数rand公式

    math.random()随机整数_随机函数rand公式Math.round(Math.random()*x);Math.round(Math.random()*(y-x)+x);Math.ceil(Math.random()*x);

    2022年8月4日
    2
  • 为什么你总成为不了架构师?

    为什么你总成为不了架构师?

    2021年11月14日
    35
  • python多行注释出错_解决python多行注释引发缩进错误的问题

    python多行注释出错_解决python多行注释引发缩进错误的问题如下所示:m_start=date+’09:00’m_end=date+’13:00’rsv_1={‘act’:’set_resv’,’dev_id’:dev_id,’start’:m_start,’end’:m_end,}”’rsv_2={‘_’:”,’act’:’set_resv’,’dev_id’:dev_id,’start’:’2018-05-2113:00′,’en…

    2025年6月22日
    1
  • 飞机订票系统(C语言)

    飞机订票系统(C语言)用C语言解决飞机订票系统***一、问题描述:根据以下功能说明,设计航班信息、客户信息、订票信息的存储结构,设计程序完成相应功能。*录入:*可以录入航班情况(数据可以存储在一个数据文件中,数据个数不能少于8个、自行设计数据构成);客户信息(姓名,证件号,电话等);订票信息(订单要有编号,其余数据自行设计)。****查询:****可以查询某个航线的情况(如,输入航班号,查询起降时间,起飞抵达城市,航班票价,票价折扣,确定航班是否满仓);可以输入起飞抵达城市,查询飞机航班情况;****订票:**

    2022年6月29日
    22
  • 细数泄漏过的数据库,目前已知公开的!「建议收藏」

    细数泄漏过的数据库,目前已知公开的!「建议收藏」先看看这张超长图吧,这里为大家提醒,一定要谨慎在网络中留下隐私信息!同时经常改密码。补天漏洞响应平台的攻城狮和程序猿们花了很长时间,整理了这么一张灰常漂亮的图。这里整理的仅仅是已经被公开的部分,实际上地下有很多企业的大量数据库在流传,社工库已经强大到威胁到所有人的隐私信息,信息安全问题急需解决。我们知道还遗漏了很多数据,欢迎大家给我…

    2022年9月19日
    0
  • bat 延迟执行后面命令_bat命令延时10秒启动程序

    bat 延迟执行后面命令_bat命令延时10秒启动程序1、使用WScirpt的sleep功能,精度0.001秒创建vbs延迟文件,然后在批处理文件中调用,使用WScript的sleep函数,实现sleep的效果。实战:1)创建文件sleep.vbs:sleep.vbs内容如下:WScript.sleep5000。2)调用vbsstart/waitsleep.vbs1、使用choice命令choice/t10/cyn/n/dn/m(10秒后打开)CHOICE[/Cchoices][/.

    2022年9月23日
    0

发表回复

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

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