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

Vue.js 保持二级菜单高亮显示的实现

最新推荐文章于 2024-03-12 18:52:24 发布

原创最新推荐文章于 2024-03-12 18:52:24 发布 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍了如何在Vue.js中使用Element UI组件库实现二级菜单点击后保持高亮显示。通过设置`default-active`属性并结合`sessionStorage`存储当前激活的路径，确保页面刷新后仍能正确显示选中状态。同时，代码中展示了如何配置菜单的样式，如背景色、文字颜色等。

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

<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"