代码
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>
<style scoped>
style>
Home.vue
<template>
<div class="contain">
Hello,Home
div>
template>
<script>
export default {
name: 'Home',
data () {
return {
}
}
}
script>
<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>
<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 = false
Vue.use(ElementUI)
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
template: '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>
<style scoped>
style>
<template>
<div style="text-align: center">
<h1>欢迎来到首页！h1>
div>
template><template>
<div>我是通知管理div>
template>
<script>
export default {
data () {
return {
}
},
methods: {
}
}
script>
<style>
style>
<template>
<div>我是部门管理div>
template>
<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 }
]
}
]
})