首页 > 其他分享 >vue3 左侧菜单栏默认展开关闭

vue3 左侧菜单栏默认展开关闭

时间:2023-05-22 17:14:11浏览次数:41  
标签:menu 跳转 value 菜单栏 init 默认 vue3

      <el-menu
        class="mainMenu"
        router
        background-color="transparent"
        active-text-color="#fff"
        :unique-opened="true"
        :collapse-transition="false"
        :collapse="getIndexFlag"
        :default-active="activeIndex"
        :mode="navDirection == 'horizontal' ? 'horizontal' : 'vertical'"
      >
        <MenuItem
          v-for="(val, index) in state.menuList"
          :key="val.id"
          :menu="val"
        ></MenuItem>
      </el-menu>
// 初始化
function init() {
  // 从页面任意入口跳转或浏览器访问url,菜单高亮
  activeIndex.value = route.path;
}

watch(
  () => router.currentRoute.value,
  value => {
     init();
  }
);

onMounted(() => {
  // 初始化
  init();
});

key:需要设置为 id,而非index,否则会导致router.push跳转页面时,左侧菜单栏默认展开关闭有问题

menuItem组件:

<template>
  <template v-if="menu.children && menu.children.length > 0">
    <el-sub-menu :index="menu.url || menu.id.toString()">
      <template #title>
        <i v-if="menu.icon" :class="`font_family iconfont ${menu.icon}`"></i>
        <span>{{ menu.name }}</span>
      </template>
      <MenuItem
        v-for="item in menu.children"
        :key="item.id"
        :menu="item"
      ></MenuItem>
    </el-sub-menu>
  </template>
  <template v-else>
    <el-menu-item :index="menu.url || menu.id.toString()">
      <i v-if="menu.icon" :class="`font_family iconfont ${menu.icon}`"></i>
      <span>{{ menu.name }}</span>
    </el-menu-item>
  </template>
</template>
<script lang="ts" setup>
defineProps({
  menu: {
    type: Object,
    required: true,
  },
});
</script>

 

标签:menu,跳转,value,菜单栏,init,默认,vue3
From: https://www.cnblogs.com/rachelch/p/17421100.html

相关文章

  • Vue3+Vite部署到Netlify
    前言本项目的前端是使用Vue3技术。因为用到了Vite做代理解决跨域问题,所以部署到Netlify需要多做一些步骤。使用Vite代理后,如果前端是在本地部署,需要添加VITE_PROXY环境变量。例如在.env.development文件中添加VITE_PROXY=[["/api/v1","https://xx.naihe.me/api/v1"],["/ws",......
  • Winform设置成默认以管理员方式启动的方法
     很多exe应用如果不以管理员权限运行,达不到运行目的,也会让用户很困扰。解决方法:1、在项目上右键添加新文件,选择新建app.manifest文件 2、按照下图参照注释部分修改trustInfo节点中的配置即可还有另外一个方法。这个需要写在Program.cs里面。staticvoidMain(s......
  • 分享几个默认密码在线查询网站
    网络设备忘记了密码,不要慌,先看一下厂家和型号,找找产品手册,不行就在线查一查,比如下面这几个网站,说不定有惊喜。本文分享几个默认密码在线查询网站,仅用于用户找回默认密码,不许干坏事哦。网站所提供的管理员默认密码均出于研究目的以及合法用途。1、HUAWEI默认账号/密码查询工具提供......
  • 学习笔记-Java8新特性-第六节-接口中的默认方法与静态方法
    接口中的默认方法与静态方法默认方法在接口中可以使用default修饰方法,为方法提供默认实现publicinterfaceMyInterface{defaultvoidgetName(){System.out.println("DEFAULT");}}一般情况下,继承了接口的子类,可以不提供接口的实现类优先......
  • Ribbon默认负载均衡规则替换为NacosRule
    近期博主在参与一个SpringCloud搭建,版本为Hoxton.SR12,服务注册发现组件为Nacos的老项目时,发现项目负载均衡组件Ribbon的负载均衡规则在某些场景下不够完美,比如新版本上线,需要重启服务。因此写了这边文章与大家分享。在微服务架构中,负载均衡是实现高可用性、高性能和可......
  • matlab默认工作路径的修改方法,永久的
    说起来也简单,就是到安装路径文件夹下C:\ProgramFiles\R2011a\toolbox\local找文件mathrc.m文件,在最后一行添加cd'你想要的默认路径下文件夹',andifyoufinishthisstep,thenyoumakeit.......
  • controller是单例模式还是多例模式?spring默认的是单例模式,那么如何保证线程安全
    controller是单例模式还是多例模式在Java中,Controller既可以是单例模式,也可以是多例模式,这取决于具体的实现方式。在单例模式中,Controller只会被实例化一次,多个线程共享同一个实例。这样可以节约系统资源,提高系统性能。但是在多线程环境下,如果不加以保护,可能会出现线程安全的问......
  • vue3 +leaflet + 天地图
    vue3使用leafletnpminstallleaflet-D如果使用了tsnpmi--save-dev@types/leaflet//使用了ts需要下载声明类型//更具需要获取不通过类型的urlfunctiongetUrl(type:string){interfaceMyObject{[key:string]:Array<string>;}letobj:MyObject=......
  • linux默认目录和常用文件、目录
    1、介绍各种linux发行版本之间遵循基本一致的文件命名和使用规则,目录本身不具备特殊性,而是系统默认运行、安装、配置等会将文件保存在各个约定的目录下,建议用户也遵循这一约定,方便管理。2、默认目录(1)binbinaries二进制文件的缩写,存放的是普通命令。比如cat,cd(2)sbinsuperbin......
  • linux默认目录
    1、介绍在linux中,一切皆文件,即通过对文件的操作实现不同功能。(ll命令查看)目录是文件、网络访问也是文件、硬件设备还是文件。2、文件属性(1)文件类型第一个字符表示文件类型:d对应目录、-对应文件、l对应链接文档,b表示为装置文件里面的可供储存的接口设备(可随机存取装置);c......