Element UI手册：cloud.tencent.com/developer/d… 中文文档：element-cn.eleme.io/#/zh-CN github地址：github.com/ElemeFE/ele…

1：components 新建页面

2：打开app.vue 写代码

<template><div><el-col :span="2">   <el-menu:default-active="this.$route.path" router mode="horizontal"class="el-menu-vertical-demo"@open="handleOpen"@close="handleClose"background-color="#545c64"text-color="#fff"active-text-color="#ffd04b"><el-menu-item v-for="(item,i) in navList" :key="i" :index="item.name"><template slot="title"><i class="el-icon-s-platform"></i><span> {{ item.navItem }}</span></template></el-menu-item></el-menu></el-col><router-view     class="menu-right"/></div>
</template>
<script>export default {data() { return { navList:[ {name:'/components/ServiceHall',navItem:'服务大厅'}, {name:'/components/Management',navItem:'权限管理'},{name:'/components/User',navItem:'用户管理'}, {name:'/components/Personnel',navItem:'人员数据'}, {name:'/components/Alarm',navItem:'报警中心'}, ] } },methods: {handleOpen(key, keyPath) {console.log(key, keyPath);},handleClose(key, keyPath) {console.log(key, keyPath);}}}
</script><style>.menu-right{margin-left:200px;}</style>
复制代码

3:路由index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import ServiceHall from '@/components/ServiceHall'
import Management from '@/components/Management'
import User from '@/components/User'
import Personnel from '@/components/Personnel'
import Alarm from '@/components/Alarm'Vue.use(Router)export default new Router({routes: [{path: '/',name: 'HelloWorld',component: HelloWorld},{path: '/components/ServiceHall',name: 'ServiceHall',component: ServiceHall}, {path: '/components/Management',name: 'Management',component: Management},{path: '/components/User',name: 'User',component: User},{path: '/components/Personnel',name: 'Personnel',component: Personnel},{path: '/components/Alarm',name: 'Alarm',component: Alarm}]
})复制代码

4：新页面的内容,我写的比较简单，需要自己写下功能需求所在的代码

<template>    <div>我是权限管理页面</div>
</template>
<script>
</script>
<style>
</style>
复制代码

5：效果就可以看了

原文作者：祈澈姑娘