转载于：https://www.cnblogs.com/mica/p/10790976.html
Vue 实现左边导航栏且右边显示具体内容（element-ui）
</h1>
<div class="clear"></div>
<div class="postBody">
最终效果图：
现在开始进入正题：
1、安装element-ui
npm i element-ui -S CDN
目前可以通过 unpkg.com/element-ui 获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用。
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" target="_blank" rel="external nofollow" >
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script> 2.在main.js中引入
3、在 components 中新建导航栏组件
<template>
<el-row class="tac">
<el-col :span="12">
<h5>默认颜色</h5>
<el-menu
default-active="2"
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose"
>
<el-submenu index="1">
<template slot="title">
<i class="el-icon-location"></i>
<span>导航一</span>
</template>
<el-menu-item-group>
<template slot="title">分组一</template>
<el-menu-item index="1-1">选项1</el-menu-item>
<el-menu-item index="1-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="1-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="1-4">
<template slot="title">选项4</template>
<el-menu-item index="1-4-1">选项1</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="/demo" @click="goTo('/demo')">
<i class="el-icon-menu"></i>
<span slot="title">导航二</span>
</el-menu-item>
<el-menu-item index="/index" @click="goTo('/index')">
<i class="el-icon-setting"></i>
<span slot="title">导航三</span>
</el-menu-item>
</el-menu>
</el-col>
<router-view></router-view>
</el-row>
</template>
<script>
export default {
data() {
return {};
},
methods: {
handleOpen(key, keyPath) {
console.log(key, keyPath);
},
handleClose(key, keyPath) {
console.log(key, keyPath);
},
goTo(path) {
this.$router.replace(path);
}
}
};
</script>
<style scoped>
.el-col-12{
width: 15%;
}
</style>
4、在router下的index.js中引入组件，搭配路由
5、添加跳转路径
6、很重要的一点，加上路由出口，也就是右侧显示部分
这样就实现成功啦