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

导航栏跳转页面[通俗易懂]一个页面有多个导航栏跳转页面一定要有这三步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)
      }
    },  
  }

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

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

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 解析近期爆发的服务器挖矿病毒原理

    解析近期爆发的服务器挖矿病毒原理事情起因:同事解决服务器中挖矿病毒的过程可以看到,病毒的主要起因是利用了Linux预加载型恶意动态链接库的后门,关于Linux预加载的知识可以参考这一篇文章:警惕利用Linux预加载型恶意动态链接库的后门 一、准备工作我们导出病毒文件 libioset.so,然后利用IDA反编译该so文件,得到如下图的函数列表:可以看到,里面有许多我们熟悉的库函数,例如fope…

  • 浅谈 JDBC 中 CreateStatement 和 PrepareStatement 的区别与优劣。

    浅谈 JDBC 中 CreateStatement 和 PrepareStatement 的区别与优劣。微信搜索程序员的起飞之路可以加我公众号,保证一有干货就更新~本人的几点浅见,各位大大不喜勿喷。先说下这俩到底是干啥的吧。其实这俩干的活儿都一样,就是创建了一个对象然后去通过对象调用executeQuery方法来执行sql语句。说是CreateStatement和PrepareStatement的区别,但其实说的就是Statement和PrepareStatement的区别,相信大家在网上已经看到过不少这方面的资料和博客,我在此处提几点,大家看到过的,就当重记忆,没看到就当补充~下面开始谈谈他.

  • git 比较两个分支不同的commit[通俗易懂]

    git 比较两个分支不同的commit

  • windows开机自动执行bat脚本启动cmd命令窗口并执行命令,最后自动关闭cmd命令窗

    windows开机自动执行bat脚本启动cmd命令窗口并执行命令,最后自动关闭cmd命令窗windows开机自动执行bat脚本启动cmd命令窗口并执行命令,最后自动关闭cmd命令窗

  • svm实现手写数字识别_数字识别

    svm实现手写数字识别_数字识别老师常说,在人工智能未发展起来之前,SVM技术是一统江湖的,SVM常常听到,但究竟是什么呢?最近研究了一下基于SVM技术的手写数字识别。你没有看错,又是手写数字识别,就是喜欢这个手写数字识别,没办法(¬∀¬)σ一、背景1.手写数字识别技术的含义2.手写数字识别技术的理论价值3.数字识别技术的难点二、SVM技术1.SVM方法简介2.线性可划分问题3.近似线性可分问题…

  • ZW32-12型户外柱上高压真空断路器「建议收藏」

    ZW32-12型户外柱上高压真空断路器「建议收藏」本内容详细描述了ZW32-12型户外柱上高压真空断路器,包括其型号含义、使用条件、技术参数、结构特点(含断路器实物图片)、动作原理、外形及安装尺寸、安装与维护等。

发表回复

您的电子邮箱地址不会被公开。

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