请老师帮我看看哪里出问题了 点击导航栏 地址发生变化了,但是没有内容。。
导航栏代码
<template>
<div class="sidebar">
<el-menu class="el-menu-vertical-demo" :collapse="isCollapse" background-color="rgb(50, 65, 87)" text-color="rgb(191, 203, 217)" :default-active="$router.path" router>
<el-submenu index="1">
<template slot="title">
<i class="el-icon-location"></i>
<span slot="title">系统管理</span>
</template>
<el-menu-item index="/systemFunction">系统功能</el-menu-item>
<el-menu-item index="1-2">选项2</el-menu-item>
<el-menu-item index="1-3">选项3</el-menu-item>
<el-submenu index="1-4">
<span slot="title">选项4</span>
<el-menu-item index="1-4-1">选项1</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="2">
<i class="el-icon-menu"></i>
<span slot="title">导航二</span>
</el-menu-item>
<el-menu-item index="3" disabled>
<i class="el-icon-document"></i>
<span slot="title">导航三</span>
</el-menu-item>
<el-menu-item index="4">
<i class="el-icon-setting"></i>
<span slot="title">导航四</span>
</el-menu-item>
</el-menu>
</div>
</template>
<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
width: 200px;
min-height: 400px;
}
</style>
<script>
export default {
data() {
return {
isCollapse: true
};
},
methods: {
},
mounted() {
// 通过bus进行组件之间的的传值,折叠侧边栏
this.bus.$on('collapse',msg => {
this.isCollapse=msg
})
}
}
</script>
<style>
.sidebar {
display: block;
position: absolute;
left: 0;
top: 70px;
bottom: 0;
overflow-y: scroll;
}
.el-submenu__title i {
color: #fff;
margin-right: 5px;
}
.el-menu-item i{
color: #fff;
margin-right: 10px;
}
.sidebar::-webkit-scrollbar {
width: 0;
}
.sidebar-el-menu:not(.el-menu--collapse) {
width: 200px;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
width: 200px;
min-height: 400px;
}
.sidebar > ul {
height: 100%;
}
</style>
路由代码
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
component: resolve => require(['@/components/Home'], resolve),
meta: { },
children:[
{
path:'/systemFunction',
component: resolve => require(['@/pages/systemFunction/index.vue'], resolve),
meta: { title: '系统功能' }
}
]
}
]
})
文件地址
正在回答 回答被采纳积分+1
- 参与学习 人
- 提交作业 209 份
- 解答问题 3299 个
本路径是通过ES6基础知识、运用Zepto、Swiper、fullPag等移动端常用工具包、以及当下流行框架Vue,结合多个实战案例,还原真实开发场景,最终实现手机端购物商城网页开发。
了解课程
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星