ElementUI导航栏路由

最新推荐文章于 2025-06-13 12:32:42 发布

林端

最新推荐文章于 2025-06-13 12:32:42 发布

阅读量3.1k

点赞数 3

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/sheng_Mu555/article/details/87182616

本文详细介绍了如何使用Element UI的菜单组件进行导航栏配置，包括设置默认激活项、实现路由跳转及调整样式等关键步骤，适用于Vue.js项目的前端开发者。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

	<el-menu :default-active="$route.path" class="el-menu-demo" 
mode="horizontal" @select="handleSelect" background-color="#545c64"
	 text-color="#fff" active-text-color="#ffd04b" router>
		<!-- <el-menu-item index="/index">首页</el-menu-item> -->
		<el-menu-item index="/list">列表</el-menu-item>
		<el-menu-item index="/memo">备注</el-menu-item>
	</el-menu>

1.设置 ":default-active=$route.path" 在导航栏中高亮显示当前路由地址

2.设置router 以 index 作为 path 进行路由跳转

3.设置index为路由地址