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

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


相关推荐

  • 优秀的数据工程师,怎么用 Spark 在 TiDB 上做 OLAP 分析[通俗易懂]

    优秀的数据工程师,怎么用 Spark 在 TiDB 上做 OLAP 分析[通俗易懂]优秀的数据工程师,怎么用 Spark 在 TiDB 上做 OLAP 分析

    2022年4月21日
    41
  • csv格式怎么转成excel_比较好一点的Excel转PDF

    csv格式怎么转成excel_比较好一点的Excel转PDF需求说明假如有一个csv文件,打开之后不是想要的编码格式,或者一些数字全都是科学计数法计数。下面你按照下面文档一步一步操作就可以将CSV格式转化成EXCEL格式。1.新建一个excel空文档,如

    2022年8月1日
    7
  • 如何为pycharm配置解释器_python解释器加入pycharm

    如何为pycharm配置解释器_python解释器加入pycharm我们需要提前下载好python解释器解释器可以在Python解释器官网下载,这里我下载的是3.8.8版本的1、在我们安装好pycharm的时候,并不是直接可以用的,我们还需要配置解释器,不配置解释器的话,就会出现下面这种情况。此时,小伙伴们莫慌,只要我们配置好解释器就可以了。2、首先点击上图中“ConfigurePythonInterpreter”,之后Pycharm就会自动定位到“ProjectInterpreter”这个位置,如下图所示,该界面是Pycharm的设置窗口之一,专门用

    2022年8月26日
    3
  • mysql行转列函数_mysql行转列,函数GROUP_CONCAT(expr)

    mysql行转列函数_mysql行转列,函数GROUP_CONCAT(expr)demo:语句:SELECT’行’id,”product_nameUNIONSELECTid,product_nameFROM`product`WHEREid<5结果:行1icbc2测试测试314笔记本电脑语句:SELECT’行转列后’id,”product_nameUNIONSELECTGROUP_CONCAT(id)id,GROUP_CONCA…

    2022年5月6日
    2.6K
  • 特立独行的理解_喜欢特立独行的人

    特立独行的理解_喜欢特立独行的人原题链接对一个十进制数的各位数字做一次平方和,称作一次迭代。如果一个十进制数能通过若干次迭代得到 1,就称该数为幸福数。1 是一个幸福数。此外,例如 19 经过 1 次迭代得到 82,2 次迭代后得到 68,3 次迭代后得到 100,最后得到 1。则 19 就是幸福数。显然,在一个幸福数迭代到 1 的过程中经过的数字都是幸福数,它们的幸福是依附于初始数字的。例如 82、68、100 的幸福是依附于 19 的。而一个特立独行的幸福数,是在一个有限的区间内不依附于任何其它数字的;其独立性就是依附于它的的幸福数

    2022年8月8日
    6
  • C++11 decltype 的用法

    C++11 decltype 的用法文章目录decltype的意义decltype的用法1.推导规则2.举例说明3.模版案例更多细节问题C++14取消decltype其他decltype的意义参考博客:C++11新标准:decltype关键字有时我们希望从表达式的类型推断出要定义的变量类型,但是不想用该表达式的值初始化变量(如果要初始化就用auto了)。为了满足这一需求,C++11新标准引入了decl…

    2022年9月4日
    2

发表回复

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

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