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

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

相关推荐

  • 浙江新增python编程_9月起,浙江省八年级新增Python编程课,未来编程是处理大数据的手段…「建议收藏」

    浙江新增python编程_9月起,浙江省八年级新增Python编程课,未来编程是处理大数据的手段…「建议收藏」原标题:9月起,浙江省八年级新增Python编程课,未来编程是处理大数据的手段最近一个非常火爆的话题在家长群引起热议——浙江省中小学学习编程。浙江官方教育部宣布:今年9月份开始的新学期,三到九年级信息技术课将替换新教材。其中,八年级将新增Python课程内容。新高一信息技术编程语言由VB替换为Python,大数据、人工智能、程序设计与算法等内容按照教材规划五六年级开始接触。下面我们来具体看一…

    2022年5月13日
  • 触摸事件 touchstart、touchmove、touchend

    触摸事件 touchstart、touchmove、touchend目录触摸事件触摸事件编码触摸手指个数分析触摸目标DOM元素分析触摸位置分析触摸事件HTML5中,PC端基于鼠标的界面互动主要是单击,移动端界面交互方式主要是触摸。移动端浏览器触摸事件事件名称 描述 是否包含touches数组 touchstart 触摸开始,多点触控,后面的手指同样会触发 是 touchmove …

    2022年6月19日
  • Centos7下Rinetd安装与应用[通俗易懂]

    转自http://www.cnblogs.com/zhenyuyaodidiao/p/5540209.htmlLinux下做地址NAT有很多种方法。比如haproxy、nginx的4层代理,linux自带的iptables等都能实现。haproxy、nginx就不说了,配置相对简单;iptables配置复杂,概念也比较多DNAT、SNAT、PREROUTING、POSTROUTING等等。其实

    2022年4月17日
  • 在虚拟机安装ubuntu步骤_vmware虚拟机安装教程

    在虚拟机安装ubuntu步骤_vmware虚拟机安装教程准备工作VMwareWorkstation15官方下载地址:https://www.vmware.com/cn/products/workstation-pro/workstation-pro-evaluation.htmlUbuntu18.04LTS镜像官方下载地址:https://ubuntu.com/download/desktop注:VMwareWorkstation15激…

    2022年9月17日
  • 百度地图api文档_奥维互动地图使用教程

    百度地图api文档_奥维互动地图使用教程新版百度地图API增加了发布版SHA1,开发版SHA1按官方教程操作即可,这里介绍一下发布版SHA1的获取方法。为apk签名,生成keystore文件(如果已经有keystore文件,跳过此步骤)打开cmd,定位文件夹到.andorid下,默认路径是users/用户名/.android输入keytool-list-v-keystore*.jks,*.jks为keystor

    2022年8月11日
  • matlab的length函数和size函数

    matlab的length函数和size函数在matlab中length函数和size函数的用法

    2022年5月2日

发表回复

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

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