elementui导航栏菜单,elementui动态菜单
这篇文章主要为大家详细介绍了某视频剪辑软件使用元素-用户界面实现菜单导航，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件使用元素-用户界面实现菜单导航的具体代码，供大家参考，具体内容如下
效果图
目录截图
安装vue-router 和 element-ui
某视频剪辑软件路线是官方路由导航，元素-用户界面是饿了么封装的基于某视频剪辑软件的组件库
新公共管理安装vue-路由器-保存
新公共管理安装元素-ui -保存
关闭ESLint检查
新增配置文件src/vue.config.js文件
模块。导出={
lintOnSave: false
}
src/main.js
在主页。射流研究…里引入某视频剪辑软件路由器和元素-用户界面。
创建两个页面组件，电影和小说。
定义路由映射。
路由改成h5模式，去掉难看的#符号。
从“vue”导入某视频剪辑软件
从导入应用程序 App.vue
从“vue路由器"导入某视频剪辑软件路由器
从"元素-用户界面"导入ElementUI
导入元素-ui/lib/主题-粉笔/索引。 CSS
从导入电影 components/movie.vue
从导入小说.组件/小说. vue
Vue.config.productionTip=false
Vue.use(VueRouter)
vue。使用(元素ui)；
常量路由=[
{路径："/电影"，组件：电影}，
{路径："/小说",组件：小说}
]
//3.创建路由器实例，然后传`路线配置
//你还可以传别的配置参数，不过先这么简单着吧。
const router=new VueRouter({
模式："历史“，//h5模式
路线//(缩写)相当于路线：路线
})
新Vue({
render: h=h(App)，
路由器
}).$ mount("# app ")
src/comments/movie.vue
电影页面组件
模板
差异
电影页面
/div
/模板
脚本
导出默认值{
名称："电影"
}
/脚本
样式范围
/风格
src/comments/novel.vue
小说页面组件
模板
差异
小说页面
/div
/模板
脚本
导出默认值{
名称："小说"
}
/脚本
样式范围
/风格
src/comments/NavMenu.vue
导航组件。这里使用了元素-用户界面的菜单组件navMenuData模拟了我们菜单的数据。属性默认-活动代表当前选中的菜单，路由器属性代表指数自动当成路由路径。
迭代循环生成菜单，在模板标签中写v代表，不会一直复制当前的模板。
看别人博客都是：default-active=$route.path ，我这里多了个/。所以在安装好的生命周期里去除/。
模板
div id=NavMenu
埃尔菜单
:default-active=activeIndex
el菜单演示
模式=水平
@select=handleSelect
路由器
！-
埃尔菜单项索引=1 电影/El-菜单项
埃尔菜单项索引=2 小说/El-菜单项
埃尔-子菜单索引=3
模板槽=标题我的工作台/模板
埃尔菜单项索引=3-1 选项1/el菜单项
埃尔菜单项索引=3-2 选项2/el菜单项
埃尔菜单项索引=3-3 选项3/el菜单项
埃尔-子菜单索引=3-4
模板槽=标题选项4/模板
埃尔菜单项索引=3-4-1 选项1/el菜单项
埃尔菜单项索引=3-4-2 选项2/el菜单项
埃尔菜单项索引=3-4-3 选项3/el菜单项
/El-子菜单
/El-子菜单
-
模板v-for= navMenuData中的项目
El-菜单项：index= item。index v-if=！项目。子项目“{ item。name } }/El-菜单项
El-子菜单：index= item。索引“v-if=”项。孩子
模板slot= title"{ item。名称} }/模板
模板v-for= item。儿童中的项目2
El-menu-item:index= item 2。索引“”项2。name } }/El-菜单项
/模板
/El-子菜单
/模板
/el-menu
/div
/模板
脚本
导出默认值{
名称：导航菜单，
data() {
返回{
activeIndex:"电影",
navMenuData: [
{索引： 电影，名称：电影 },
{索引： 小说，名称：小说 },
{
索引："2",
名称： 我的工作台，
子级：[{ index: 2-1 ，名称： 选项1 },{索引： 2-2 ,名称：选项2 },{索引： 2-3 ,名称：选项3 }]
},
]
};
},
方法：{
handleSelect(key，keyPath) {
console.log(key，key path)；
}
},
已安装(){
console.log(this.activeIndex)
console.log(这个. route.path)
this.activeIndex=this .$route.path.substring(1，this .$ route。路径。长度)；
}
};
/脚本
样式范围
/风格
src/App.vue
这里使用了元素-用户界面的容器布局，引入了自己写的导航菜单菜单组件。
模板
div id=应用程序
埃尔容器
埃尔-标题
导航菜单/导航菜单
/el-header
埃尔梅因
路由器视图/路由器视图！-路由出口-
/el-main
电子页脚/电子页脚
/El-容器
/div
/模板
脚本
从导入导航菜单.组件/导航菜单。vue ；
导出默认值{
名称："应用程序",
组件：{
导航菜单
}
};
/脚本
样式范围。埃尔-标题，埃尔-页脚{
背景色：# b3c0d1
颜色：# 333;
文本对齐：居中；
高度：100像素
填充：0px
}。el-main {
背景色：# e9eef3
颜色：# 333;
文本对齐：居中；
行高：160像素；
}
/风格
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。