【 Element UI 】二级菜单高亮显示

最新推荐文章于 2024-09-12 09:11:34 发布

zwj、

最新推荐文章于 2024-09-12 09:11:34 发布

阅读量1.2k

点赞数

本文链接：https://blog.csdn.net/Twisted_/article/details/119204565

版权

保持二级菜单点击之后高亮

<el-menu
	:collapse="isCollapse"
    :collapse-transition="false"
    background-color="#fff"
    text-color="#000"
    active-text-color="#ffd04b"
    :router="true"
    :default-active="aciveNavPath"
>
</el-menu>

<script>
export default {
	data(){
		return {
			 // 二级菜单 路由地址
			aciveNavPath:""
		}
	},
	methods{
		// 保存二级菜单的导航地址 方便点击时 保持高亮状态
	    saveNav(path) {
	      window.sessionStorage.setItem("path", path);
	    }
    },
    created{
		// 获取存储在sessionStorage里面的二级导航菜单路由地址
    	this.aciveNavPath = window.sessionStorage.getItem("path");
	}
};
</script>

在这里插入图片描述

	// 设置导航栏是否展开
	:collapse="isCollapse"
	// 设置导航栏的动画效果
    :collapse-transition="false"
	// 设置导航栏的背景色
    background-color="#fff"
    // 设置导航栏文本颜色
    text-color="#000"
    // 设置导航栏点击之后的文本颜色
    active-text-color="#ffd04b"
    // 为二级菜单开启路由模式 跳转到 二级路由绑定的 :index="xxxx" 路径里面
    :router="true"
    // 保持二级菜单点击之后高亮显示
    :default-active="aciveNavPath"