Vue使⽤element-ui实现菜单导航本⽂实例为⼤家分享了Vue使⽤element-ui实现菜单导航的具体代码，供⼤家参考，具体内容如下效果图
⽬录截图
安装vue-router 和 element-ui
vue-route是官⽅路由导航,element-ui是饿了么封装的基于vue的组件库
npm install vue-router --save
npm install element-ui --save
关闭ESLint检查
新增配置⽂件fig.js ⽂件
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.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
})
vue element adminnew Vue({
render: h => h(App),
router
}).$mount('#app')
src/comments/movie.vue
电影页⾯组件
<template>
<div>
movie页⾯
</div>
</template>
<script>
export default {
name: 'movie'
}
</script>
<style scoped>
</style>
src/comments/novel.vue
⼩说页⾯组件
<template>
<div>
novel页⾯
</div>
</template>
<script>
export default {
name: 'novel'
}
</script>
<style scoped>
</style>
src/comments/NavMenu.vue
导航组件。这⾥使⽤了element-ui的菜单组件。navMenuData模拟了我们菜单的数据。属性default-active代表当前选中的菜单,router属性代表index⾃动当成路由路径。
v-for循环⽣成菜单，在template标签中写v-for，不会⼀直复制当前的template。
看别⼈博客都是:default-active="$route.path"，我这⾥多了个/。所以在mounted⽣命周期⾥去除/。
<template>
<div id="NavMenu">
<el-menu
:default-active="activeIndex"
class="el-menu-demo"
mode="horizontal"
@select="handleSelect"
router
>
<!--
<el-menu-item index="1">电影</el-menu-item>
<el-menu-item index="2">⼩说</el-menu-item>
<el-submenu index="3">
<template slot="title">我的⼯作台</template>
<el-menu-item index="3-1">选项1</el-menu-item>
<el-menu-item index="3-2">选项2</el-menu-item>
<el-menu-item index="3-3">选项3</el-menu-item>
<el-submenu index="3-4">
<template slot="title">选项4</template>
<el-menu-item index="3-4-1">选项1</el-menu-item>
<el-menu-item index="3-4-2">选项2</el-menu-item>
<el-menu-item index="3-4-3">选项3</el-menu-item>
</el-submenu>
</el-submenu>
-->
<template v-for="item in navMenuData">
<el-menu-item :index="item.index" v-if="!item.child">{{item.name}}</el-menu-item>
<el-submenu :index="item.index" v-if="item.child">
<template slot="title">{{item.name}}</template>
<template v-for="item2 in item.child">
<el-menu-item :index="item2.index">{{item2.name}}</el-menu-item>
</template>
</el-submenu>
</template>
</el-menu>
</div>
</template>
<script>
export default {
name: "NavMenu",
data() {
return {
activeIndex: "movie",
navMenuData: [
{ index: "movie", name: "电影" },
{ index: "novel", name: "⼩说" },
{
index: "2",
name: "我的⼯作台",
child: [{ index: "2-1", name: "选项1" },{ index: "2-2", name: "选项2" },{ index: "2-3", name: "选项3" }]        },
]
};
},
methods: {
handleSelect(key, keyPath) {
console.log(key, keyPath);
}
},
mounted(){
console.log(this.activeIndex)
console.log(this.$route.path)
this.activeIndex = this.$route.path.substring(1,this.$route.path.length);
}
};
</script>
<style scoped>
</style>
src/App.vue
这⾥使⽤了element-ui的容器布局，引⼊了⾃⼰写的NavMenu菜单组件。
<template>
<div id="app">
<el-container>
<el-header>
<NavMenu></NavMenu>
</el-header>
<el-main>
<router-view></router-view> <!--路由出⼝ -->
</el-main>
<el-footer>Footer</el-footer>
</el-container>
</div>
</template>
<script>
import NavMenu from "./components/NavMenu.vue";
export default {
name: "app",
components: {
NavMenu
}
};
</script>
<style scoped>
.el-header,
.
el-footer {
background-color: #b3c0d1;
color: #333;
text-align: center;
height: 100px;
padding: 0px;
}
.el-main {
background-color: #e9eef3;
color: #333;
text-align: center;
line-height: 160px;
}
</style>
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。