最终效果图：

现在开始进入正题：

1、安装element-ui

npm i element-ui -S

CDN

目前可以通过/element-ui获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用。

<!-- 引入样式 --><link rel="stylesheet" href="/element-ui/lib/theme-chalk/index.css"><!-- 引入组件库 --><script src="/element-ui/lib/index.js"></script>

2.在main.js中引入

3、在 components 中新建导航栏组件

<template><el-row class="tac"><el-col :span="12"><h5>默认颜色</h5><el-menudefault-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、很重要的一点，加上路由出口，也就是右侧显示部分

这样就实现成功啦