Vue 在el-menu中导航栏实现方式

最新推荐文章于 2025-03-06 11:20:10 发布

yjxfox

最新推荐文章于 2025-03-06 11:20:10 发布

阅读量4k

点赞数

分类专栏： Element

本文链接：https://blog.youkuaiyun.com/yjxfox/article/details/90058914

版权

Element 专栏收录该内容

6 篇文章

订阅专栏

本文介绍如何在Element UI的el-menu组件中集成Vue Router，通过设置default-active属性和使用router参数实现菜单项与页面路由的联动。同时，展示了如何为每个菜单项设置对应的链接地址，并调整el-menu-item的样式。

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

在el-menu中加上router参数，同时el-menu-item 中index直接写上链接地址，default-active="/home" 设置默认选中状态

源代码如下：

<el-menu default-active="/home" router>
                        <el-menu-item index="/home"><a href="javascript:;"><i class="iconfont icon-shouyeshouye"></i>首页</a></el-menu-item>
                        <el-menu-item index="/activity"><a href="javascript:;"><i class="iconfont icon-gongju"></i>活动管理</a></el-menu-item>
                        <el-menu-item index="/selfgoodsinfo"><a href="javascript:;"><i class="iconfont icon-shangpinguanli"></i>奖品管理</a></el-menu-item>
                        <el-menu-item index="/order"><a href="javascript:;"><i class="iconfont icon-dingdanguanli"></i>订单管理</a></el-menu-item>
                        <el-menu-item index="/report"><a href="javascript:;"><i class="iconfont icon-report"></i>报表统计</a></el-menu-item>
                    </el-menu>

编译后的代码如下：