Vue使用element-ui菜单导航

效果图

目录截图

安装vue-router 和 element-ui

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

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

关闭ESLint检查

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

module.exports = {
    lintOnSave: false
}

src/main.js

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

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 = false

Vue.use(VueRouter)
Vue.use(ElementUI);

const routes = [
  { path: '/movie', component: movie },
  { path: '/novel', component: novel }
]

// 3. 创建 router 实例，然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
  mode: 'history',  //h5模式
  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菜单组件。