最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
vue.js使用Element-ui中实现导航菜单代码示例
时间：2022-06-29 02:10:33 编辑：袖梨 来源：一聚教程网
本篇文章小编给大家分享一下vue.js使用Element-ui中实现导航菜单代码示例，文章代码介绍的很详细，小编觉得挺不错的，现在分享给大家供大家参考，有需要的小伙伴们可以来看看。
大体实现思路
圈出来的左右两部分，左边是element复制就可实现，
右边是跳转的子组件。
首先创建导航菜单的vue文件，但这个文件里面只是引入组件，里面使用Container布局容器实现左右两部分，左边el-aside标签中放入导航菜单的组件，右边el-main标签中写
导航菜单文件我起名为Elnav.vue
里面主要引入navmenu组件（navmenu组件就是elemet中的样式）
navmenu.vue中
注意设置 default-active="$route.path"以及组件跳转（选项一/二）的index值
导航一
分组一
选项1
选项2
选项3
选项4
选项1
接下来就是路由的配置
{
path: "/Elnav",
name: "Elnav",
component: () =>
import("../components/Elnav.vue"),
children:[
{
path: "/Elnav/one",
name: "one",
component: () =>
import("../components/one.vue")
},
{
path: "/Elnav/two",
name: "two",
component: () =>
import("../components/two.vue")
}
]
}
至于右边内容的one.vue以及其他vue文件的内容就自己写即可
相关文章
- 《无限暖暖》天星之羽获得位置介绍 12-20
- 《流放之路2》重铸台解锁方法介绍 12-20
- 《无限暖暖》瞄准那个亮亮的成就怎么做 12-20
- 《无限暖暖》魔气怪终结者完成方法 12-20
- 《无限暖暖》曙光毛团获得位置介绍 12-20
- 《无限暖暖》日光果获得位置介绍 12-20