请老师帮我看看哪里出问题了 点击导航栏 地址发生变化了,但是没有内容。。

请老师帮我看看哪里出问题了 点击导航栏 地址发生变化了,但是没有内容。。

导航栏代码

<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: '系统功能' }

}

]

}

]

})


文件地址

http://img1.sycdn.imooc.com//climg/5ce4a5160001e7e302170465.jpg

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

1回答
好帮手慕星星 2019-05-22 13:59:53

你好,这是自己写的项目吗?,因为没有你项目环境以及缺少其他文件,无法准确定位到代码问题所在。

写的文件多吗?如果不多的话可以把涉及到的文件代码全部粘贴上来,老师帮助你测试下问题。

祝学习愉快!

  • 提问者 诙暗_0 #1
    这没关系 是我自己模仿别的网页写的,目前就写了HOME Header 和导航栏,老师您看怎么能直接打包发给您帮我看下么?
    2019-05-22 14:53:18
  • 好帮手慕星星 回复 提问者 诙暗_0 #2
    已经在私信中进行了回复,可以查看一下哦。
    2019-05-22 19:20:07
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
热门框架Vue开发WebApp 18版
  • 参与学习           人
  • 提交作业       209    份
  • 解答问题       3299    个

本路径是通过ES6基础知识、运用Zepto、Swiper、fullPag等移动端常用工具包、以及当下流行框架Vue,结合多个实战案例,还原真实开发场景,最终实现手机端购物商城网页开发。

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师