Vue如何使用element-ui实现菜单导航

这篇文章将为大家详细讲解有关Vue如何使用element-ui实现菜单导航，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

效果图

目录截图

安装vue-router 和 element-ui

vue-route是官方路由导航,element-ui是饿了么封装的基于vue的组件库

npm install vue-router --savenpm install element-ui --save

关闭ESLint检查

新增配置文件src/vue.config.js 文件

module.exports = {    lintOnSave: false}

src/main.js

在main.js里引入vue-router 和 element-ui。
创建两个页面组件，电影和小说。
定义路由映射。
路由改成h6模式，去掉难看的#符号。

import Vue from 'vue'import App from './App.vue'import VueRouter from 'vue-router'import ElementUI from 'element-ui'import 'element-ui/lib/theme-chalk/index.css'import movie from './components/movie.vue'import novel from './components/novel.vue'Vue.config.productionTip = falseVue.use(VueRouter)Vue.use(ElementUI);const routes = [  { path: '/movie', component: movie },  { path: '/novel', component: novel }]// 3. 创建 router 实例，然后传 `routes` 配置// 你还可以传别的配置参数, 不过先这么简单着吧。const router = new VueRouter({  mode: 'history',  //h6模式  routes // (缩写) 相当于 routes: routes})new Vue({  render: h => h(App),  router}).$mount('#app')

src/comments/movie.vue

电影页面组件

src/comments/novel.vue

小说页面组件

src/comments/NavMenu.vue

导航组件。这里使用了element-ui的菜单组件。navMenuData模拟了我们菜单的数据。属性default-active代表当前选中的菜单,router属性代表index自动当成路由路径。

v-for循环生成菜单,在template标签中写v-for,不会一直复制当前的template。

看别人博客都是:default-active="$route.path",我这里多了个/。所以在mounted生命周期里去除/。

src/App.vue

这里使用了element-ui的容器布局,引入了自己写的NavMenu菜单组件。

关于"Vue如何使用element-ui实现菜单导航"这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。