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

导航栏跳转页面[通俗易懂]一个页面有多个导航栏跳转页面一定要有这三步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)
上一篇 2022年5月30日 上午11:46
下一篇 2022年5月30日 下午12:00


相关推荐

  • Spring 事务隔离级别和传播行为

    Spring 事务隔离级别和传播行为一 spring 支持的事务声明方式编程式事务当系统需要明确的 细粒度的控制各个事务的边界 应选择编程式事务 声明式事务当系统对于事务的控制粒度较粗时 应该选择声明式事务二 spring 支持 7 种事务传播行为传播行为含义 propagation required xml 文件中为 required 表示当前方法必须在一个具有事务的上下文中运行 如有客户端有事务在进行 那么被调用端将在该事务中运行 否则的话重新开启一个事务 如果被调用端发生异常 那么调用端和被调用端事

    2026年3月26日
    2
  • 反锐化掩模

    反锐化掩模英文 unsharpmaski 中文 反锐化掩模法 nbsp nbsp nbsp nbsp 将原图像通过反锐化掩模进行模糊预处理 相当于采用低通滤波 后与原图逐点做差值运算 然后乘上一个修正因子再与原图求和 以达到提高图像中高频成分 增强图像轮廓的目的 nbsp nbsp nbsp nbsp nbsp 反锐化掩模技术最早是应用于摄影技术中 以增强图像的边缘和细节 光学上的操作方法是将聚焦的正片和散焦的负片在底片上进行叠加

    2026年3月16日
    2
  • m3u8文件合并 app(m3u8合并失败)

    电脑端合成m3u8方法利用.bat文件步骤如下手机端PC端利用.bat文件bat文件是dos下的批处理文件。批处理文件是无格式的文本文件,它包含一条或多条命令。它的文件扩展名为.bat或.cmd。在命令提示下输入批处理文件的名称,或者双击该批处理文件,系统就会调用cmd.exe按照该文件中各个命令出现的顺序来逐个运行它们[1]。使用批处理文件(也被称为批处理程序或脚本),可以简化日常或重复性任务。入侵者常常通过批处理文件的编写来实现多工具的组合入侵、自动入侵及结果提取等功能。链接:百度百

    2022年4月13日
    311
  • vmware不可恢复的vcpu-0_vmware与device不兼容

    vmware不可恢复的vcpu-0_vmware与device不兼容VMwareWorkstation不可恢复错误:(vcpu-0)解决方法我的虚拟机解决方案,真实实用你可以使用下面的解决办法:1、在安装的虚拟机处右键-&amp;amp;gt;设置&amp;amp;gt;处理器&amp;amp;gt;虚拟化引擎&amp;amp;gt;首选模式,选择“IntelVT-xorAMD-V&amp;quot;;2、在运行虚拟机后提示:此主机支持IntelVT-x,但被禁用了!重启电脑进入BIO

    2026年4月15日
    4
  • qmake:高级用法

    qmake:高级用法一、添加新的配置特性特性(features)是*.prf文件中自定义函数和定义的集合(Qt安装目录\mkspecs\features中有很多*.prf文件)。存放特性文件的目录有很多地方,qmake在查找.prf文件时会按以下顺序检查每个目录:在QMAKEFEATURES环境变量中列出的目录中, 在QMAKEFEATURES属性变量中列出的目录中。 在位于mkspecs目录中的features目录中。 在QMAKESPEC环境变量提供的目录下的featu

    2022年5月19日
    60
  • qmake介绍

    qmake介绍文章目录简单介绍下qmake简要介绍关于pro文件构建一个项目使用第三方库预编译头文件让我们开始试试吧从一个简单的例子开始允许程序可以Debug添加特定平台的源文件设置当文件不存在的时候就停止qmake检查多个条件qmake可以帮助我们在跨平台构建应用程序的时候变得更简单,我们可以通过写简单的几行必要的信息来生成构建文件,我们可以在任何的软件项目中使用qmakeqmake基于pro文件生产构建…

    2022年5月19日
    88

发表回复

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

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