代码

App.vue

<template>  <div id="app" class="h-100">    <router-view></router-view>  </div></template><script>export default {  name: 'app'}</script><style>  @import "../static/css/main.css";</style>

SiderBar.vue

<template>  <div class="side-bar">     Hello,side-bar  </div></template><script>export default {  name: 'Sidebar',  data () {    return {    }  }}</script><!-- Add "scoped" attribute to limit CSS to this component only --><style scoped></style>

Home.vue

<template>  <div class="contain">    Hello,Home  </div></template><script>export default {  name: 'Home',  data () {    return {    }  }}</script><!-- Add "scoped" attribute to limit CSS to this component only --><style scoped></style>

index.js

import Vue from 'vue'import Router from 'vue-router'import Home from '@/components/common/Home'Vue.use(Router)export default new Router({  routes: [    {      path: '/',      name: 'Home',      component: Home    }  ]})

Home.vue

<template>  <div class="hbox h-100">       <v-sidebar></v-sidebar>      <div class="contain">           hello,Home      </div>  </div></template><script>import vSidebar from '@/components/common/Sidebar'export default {  name: 'Home',  components:{     vSidebar  },  data () {    return {    }  }}</script><!-- Add "scoped" attribute to limit CSS to this component only --><style scoped></style>

main.js

// The Vue build version to load with the `import` command// (runtime-only or standalone) has been set in webpack.base.conf with an alias.import Vue from 'vue'import App from './App'import router from './router'import ElementUI from 'element-ui'import 'element-ui/lib/theme-default/index.css'Vue.config.productionTip = falseVue.use(ElementUI)/* eslint-disable no-new */new Vue({  el: '#app',  router,  template: '<App/>',  components: { App }})

Sidebar.vue

<template>  <div class="side-bar aside-sm">         <el-menu default-active="2" class="el-menu-vertical-demo  h-100" theme="dark">              <el-menu-item index="home">                  <i class="el-icon-caret-right"></i>首页               </el-menu-item>              <el-submenu index="2">                  <template slot="title"><i class="el-icon-menu"></i>教务管理</template>                  <el-menu-item index="notify">通知管理</el-menu-item>                  <el-menu-item index="department">部门管理</el-menu-item>              </el-submenu>              <el-menu-item index="user">                   <i class="el-icon-setting"></i> 个人中心               </el-menu-item>         </el-menu>  </div></template><script>export default {  name: 'Sidebar',  data () {    return {    }  }}</script><!-- Add "scoped" attribute to limit CSS to this component only --><style scoped></style>

<template>    <div style="text-align: center">        <h1>欢迎来到首页！</h1>    </div></template>

<template>     <div>我是通知管理</div></template><!-- <script type="text/ecmascript-6"> --><script>export default {    data () {        return {        }     },    methods: {    }}</script><style></style>

<template>     <div>我是部门管理</div></template><!-- <script type="text/ecmascript-6"> --><script>export default {    data () {        return {        }     },    methods: {    }}</script><style></style>

<template>    <div>        个人中心    </div></template><script>export default {    data () {        return {        }     },    methods: {    }}</script><style></style>

import Vue from 'vue'import Router from 'vue-router'import Home from '@/components/common/Home'import Welcome from '@/components/page/Welcome.vue'import Notify from '@/components/page/Notify.vue'import Department from '@/components/page/Department.vue'import User from '@/components/page/User.vue'Vue.use(Router)export default new Router({  routes: [    { path: '*',redirect:'/' },     {          path: '/',component: Home,redirect: '/index',          children: [            { path: 'index',component: Welcome },            { path: 'notify',component: Notify },            { path: 'department',component: Department },            { path: 'user', component: User }          ]    }  ]})