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

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


相关推荐

  • C# 操作XML文件 XmlDocument和XElement

    C# 操作XML文件 XmlDocument和XElement首先在根目录下新建一个config.xml:<?xmlversion=”1.0″encoding=”utf-8″?><Config><Debug><Lan><ServerIp=”142.12.10.123″Port=”9601″/></Lan&g…

    2022年6月19日
    45
  • 微信公众号是html页面吗,微信公众号网页开发

    微信公众号是html页面吗,微信公众号网页开发基本配置1.设置—公众号设置—功能设置—配置JS接口安全域名安全域名配置规则如下2.开发—基本配置开发者密码第一次使用需要重新设置记录开发者ID(AppID)开发者密码(AppSecret)后面会用到3.IP白名单配置推荐填写当前本地开发IP地址和服务器IP地址本地开发地址获取方式服务器IP地址(根据自己的服务器Ip地址自行填写)多个IP地址填写用回车隔开4重要的一步在:微信公众号-开发-接…

    2022年6月6日
    31
  • 整型与字符串转换

    整型与字符串转换我们写程序的时候经常会遇到整型和字符串相互转换的问题,这里要用到几个函数,itoa(),atoi(),sprintf()下面来介绍下这几个函数的具体用法!itoa功能:把一整数转换为字符串用

    2022年7月2日
    29
  • pycharm2020 激活码【中文破解版】

    (pycharm2020 激活码)JetBrains旗下有多款编译器工具(如:IntelliJ、WebStorm、PyCharm等)在各编程领域几乎都占据了垄断地位。建立在开源IntelliJ平台之上,过去15年以来,JetBrains一直在不断发展和完善这个平台。这个平台可以针对您的开发工作流进行微调并且能够提供…

    2022年3月28日
    60
  • linux 查看java的pid,linux 查看java进程pid「建议收藏」

    linux 查看java的pid,linux 查看java进程pid「建议收藏」linux查看java进程pid[2021-01-3021:05:24]简介:建站服务器这篇文章主要介绍了linux中如何查看系统进程,具有一定借鉴价值,需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下linux查看端口被哪个进程占用的方法:1、使用“lsof-i:端口号”来查看;2、使用“netstat-tunlp|grep端口号”来查看。linux查看端口被哪个进程占…

    2022年8月24日
    9

发表回复

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

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