Vue3+ElementPlus el-menu子菜单设置父菜单选中技巧

news/2024/7/10 2:44:22 标签: elementui, vue

前言:当我们在做后台系统开发的时候,经常会遇到一个页面既可以是菜单页面,又可以是某个页面的字页面的时候,那么这个时候在路由跳转的时候就需要保持父页面选中的状态,这个时候其实页面完全可以复用的,只需要重新加一个路由配置一个参数即可。请看下方的例子

第一步在路由中设置

{
	path: "/aView",
	name: "aView",
	meta: {
		title: '父菜单A'
	},
	component: () => import( "../views/aView.vue"),
},
{
	path: "/bView",
	name: "bView",
	meta: {
		title: '父菜单B'
	},
	component: () => import( "../views/bView.vue"),//这里设置的是bView页面为菜单页面
},
{
	path: "/bView-c",
	name: "bView-c",
	meta: {
		title: '子页面',
		activeMenu:'/aView'//注意这里的设置,设置的是父菜单的path
	},
	component: () => import( "../views/bView.vue")//这里设置的是bView页面为aView的子页面,但是页面的内容还是bView
}

第二步在设置菜单的组件中

const onRoutes = computed(() => {
	if(route.meta.activeMenu) return route.meta.activeMenu
    return route.path;
});

//el-menu 标签中设置 :default-active="onRoutes"

http://www.niftyadmin.cn/n/689734.html

相关文章

excel java_excel往java中导入怎么解决

展开全部1、加入依赖的jar文件32313133353236313431303231363533e59b9ee7ad9431333361326330:123引用:*mysql的jar文件*Spring_HOME/lib/poi/*.jar2、编写数据库链接类12345678910111213141516171819202122232425package com.zzg.db;import java.sql.Con…

Vue3+ElementPlus 表格分页组件封装

第一步新建公共组件pagination.vue <template><!-- 分页 --><el-paginationbackgroundsize-change"handleSizeChange"current-change"handlePageChange":page-sizes"[10, 30, 100]":page-size"pagesize":layout"…

Mysql学习总结(32)——MySQL分页技术详解

1.什么是数据分页&#xff1a;数据分页就是将很多条记录像书本一样分页&#xff0c;每页显示多少行记录&#xff1b; 2.为什么要数据分页&#xff1a;当我们进行sql语句查询时&#xff0c;假如数据有成千上万行记录&#xff0c;如果在同一个页面去显示&#xff0c;那这个页面得…

ElementUi el-date-picker封装

前言&#xff1a;由于el-date-picker返回的是一个数组且没有格式化&#xff0c;使用起来并不是很方便&#xff0c;所有个人稍微封装了下&#xff0c;写的不好&#xff0c;有问题请多指教&#xff01; 第一步 新建vDatePicker.vue <template><el-date-picker v-model…

ACMUG

http://acmug.com/acmug-member/转载于:https://www.cnblogs.com/zengkefu/p/5072885.html

CMS本质上是什么

2015-121.数据可以任意取和构造&#xff0c;结构也很自由&#xff0c;不一定是“站点&#xff0d;栏目&#xff0d;文章&#xff0d;评论”。2.主要用于显示&#xff0c;前台不产生数据&#xff08;评论、浏览次数除外)。3.在模版进行循环、判断&#xff0c;也比后台写代码要方…

Java 面向对象编程_Java面向对象编程

面向对象的特点1.封装 2.继承 3.多态一、封装1. 类&#xff1a;把一类事物的静态属性和动态执行的操作组合在一起得到类。 抽象的2. 对象&#xff1a;类的实例 具体的 有生命周期3. 类的构造函数特点&#xff1a;函数名与类型相同&#xff1b;没有返回类型&#…

Vue3+ElementUi el-table简单封装

前言&#xff1a;一次简单的封装&#xff0c;还不够完善&#xff0c;主要是根据自己的需求封装的。。。直接贴代码&#xff01; 第一步 vTable.vue <template><el-table v-loading"config.loading"header-row-style"48px"height580border:class…