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

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


相关推荐

  • pycharm逐行调试时跳过了某行的解决办法[通俗易懂]

    pycharm逐行调试时跳过了某行的解决办法[通俗易懂]1.首先说原因我遇到的:是由于该行的函数,有装饰器(或者说闭包)装饰它。2.场景再现如图,在逐行调试的时候,我迫切想要知道第98行调试时所返回的内容,而且我还想进入98行的函数内,看看内部到底发生了什么。然而,当我点击StepOver调试下一行的时候,该死的蓝色调试框,跳到了第99行。3.如何解决此时我已经结束了本次debug,当我自己点进第98行的函数进去看的时候,发现没错,函数套了个@response_parser的装饰器,只要有这个装饰器存在,而且我debug时,跳过了该行。

    2022年8月28日
    2
  • pycharm虚拟环境下安装第三方库_pycharm需要配置环境变量吗

    pycharm虚拟环境下安装第三方库_pycharm需要配置环境变量吗pycharm配置虚拟环境安装虚拟环境1.安装相关库pipinstallvirtualenv2.切换到python安装目录下,创建虚拟环境virtualenv虚拟环境名(可自定义)virtualenvvenv3.进入cd到虚拟环境的位置(目录)的Scripts中,激活(activate.bat)虚拟环境cdvenv\Scripts#激活虚拟环境activate.bat4.退出虚拟环境deactivate.batdeactivate.bat5.使用在p

    2022年8月28日
    8
  • 清除Dns缓存_怎么清除ip地址缓存

    清除Dns缓存_怎么清除ip地址缓存MAC:sudodscacheutil-flushcacheLinux:dnsmasq的是一个轻量级的DNS、TFTP和DHCP服务器。它的目的是给局域网提供配对的DNS和DHCP服务。d

    2022年8月3日
    5
  • 第一个java程序HelloWorld「建议收藏」

    第一个java程序HelloWorld「建议收藏」接上集:java入门教程(一)转载请注明出处:https://blog.csdn.net/u014254481/article/details/81943950一、各类注释:所谓注释,跟我们学习古文时下面的注释作用如出一辙,代码中的注释也是帮我们理解代码的含义,在真正的开发中注释要求写的非常详细和清楚,而写注释的习惯要从一开始养成。(如图1)1.单行注释:只能跟一行注释内容//注释…

    2022年5月8日
    50
  • nginx.conf文件

    nginx.conf文件

    2021年10月9日
    45
  • BM3D图像去噪算法

    BM3D图像去噪算法一、引言          一种非局部去噪方法Non-localmethod[1],可以归类到spatialmethod中,另外用的比较多的还有transformmethod,基于transformmethod的方法在imagedenoise中也取得了很好的效果,不过理论阐述会比较繁琐,如BLS-GSM-Wavelet。        NLM去噪算法使用的是i

    2022年5月2日
    86

发表回复

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

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