【应用】如何使用 element-ui 之 NavMenu 导航菜单 中 的 router 属性(在激活导航时以 path 进行路由跳转)
效果图:
使用:
1.<template>
<el-header style="height: 61px" > <el-menu mode = "horizontal" background-color = "#76c7f4" text-color = "#000000" active-text-color = "#ffffff" border-bottom = "none" router // 启用 router 属性 :default-active = "path" // 当前激活的菜单绑定"path" class = "el-menu-demo"> <template v-for="(item, index) in nav_menu_data"> <el-menu-item :index = "item.path" :key = "index"> {{item.title}} </el-menu-item> </template> </el-menu> </el-header>
2.data
data () {
return {
path: '',
nav_menu_data: [{
title: '导航一',
path: '/Menu/Page1'
}, {
title: '导航二',
path: '/Menu/Page2'
}, {
title: '导航三',
path: '/Menu/Page3'
}, {
title: '导航四',
path: '/Menu/Page4'
}]
}
}
3.created
created () {
this.onRouteChanged()
4.methods
methods: {
onRouteChanged () {
let that = this
that.path = that.$route.path
}
}
5.watch
watch: {
// 监测路由变化,只要变化了就调用获取路由参数方法将数据存储本组件即可
'$route': 'onRouteChanged'
}
6.style
1 2 3 4 5 6 7 8 | <style scoped> .el-header { background-color : #76c7f4 ; display : flex; align-items: center ; justify- content : center } </style> |
END
unique-opened="true"
漫思
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· NetPad:一个.NET开源、跨平台的C#编辑器
· 面试官:你是如何进行SQL调优的?
2017-02-24 CSS如何进行图文并茂布局怎么破
2017-02-24 jquery菜单插件
2017-02-24 CSS在项目中常用的属性总结
2017-02-24 CSS3动画常用demo