携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第21天，点击查看活动详情
ElementUI我们常用于开发信息系统，所谓信息系统，也就是区别于普通网站结构，是独立的后台系统，在用户login认证成功后，跳转后的首页一般是左右结构，即左边是竖向导航栏，右边是内容区。那么如何使实现菜单路由显示在内容区呢？
首先，我们在main.js中，引入elementui、axios和vue-router。定义一个path为/index的路由，指向import('@/views/index'),作为系统首页，同时它有三个children子路由，根据路由切换展示在内容区域，其中path为空的即/index打开时展示的子页面，然后通过菜单进行路由的切换user和role。
import Vue from 'vue'
import App from './App.vue'
// 引入Elementui
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
// 引入axios
import axios from 'axios'
Vue.prototype.axios = axios
// 引入vue-router
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const router = new VueRouter({
routes: [{
path: '/index',
component: () => import('@/views/index'),
children: [{
name: "",
path: '',
component: () => import('@/views/desttop')
}, {
name: "user",
path: 'user',
component: () => import('@/views/user')
},{
name: "role",
path: 'role',
component: () => import('@/views/role')
}]
}, ]
})
Vue.config.productionTip = false
new Vue({
router,
render: h => h(App),
}).$mount('#app')
index.vue使用Element-ui的布局el-container中的左右分栏组件el-aside和el-main，el-aside我们引用一个SideBar的侧边栏组件，用于展示竖向菜单。在el-main里配置一个<router-view></router-view>用于展示/index的子路由。
<template>
<el-container>
<el-aside width="200px">
<SideBar></SideBar>
</el-aside>
<el-main>
<router-view></router-view>
</el-main>
</el-container>
</template>
<script>
import SideBar from '@/components/SideBar'
export default {
name: 'index',
components: {
SideBar
}
}
</script>
<style>
</style>
siderbar.vue
<template>
<el-menu class="el-menu-vertical-demo" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b"
router>
<el-menu-item index="/index/user">
<i class="el-icon-menu"></i>
<span slot="title">用户管理</span>
</el-menu-item>
<el-menu-item index="/index/role">
<i class="el-icon-menu"></i>
<span slot="title">角色管理</span>
</el-menu-item>
</el-menu>
</template>
<script>
</script>
<style>
</style>
最后的效果：
