记录踩坑的两个地方。
两个都是关于侧导航栏的部分,涉及到router-view和index.js部分
一、index.js部分
各位在写侧导航栏时一定遇到过多级导航栏的情况,如图
系统管理下有多个二级导航,大家在写路由的时候肯定也遇到路由路径的问题,犯的错误之一:一直牢记着在写子路由的时候不能加“/”的知识点,
其实,这边记住:一定要加斜杠路径!!
对应的地址如下:
在这个页面中反而加不加斜杠都无所谓,都行,本人亲测都可以。在router/index.js中如果不加的话,就会导致页面出现空白。
这是踩坑一。
二、router-view部分
这部分说实话踩坑的人应该不多,本人思索良久才知道问题出在哪里
还是这张图:
在这层的导航,按照我们的逻辑,这只是侧导航栏的一个下拉的动作,为什么要添加一个component呢?我也查了很多资料,发现网上在这部分叙述都是一笔带过甚至提都不提。
这个component如果不写,同样会导致页面出现空白的问题,因为这部分太重要了!!
我们在写到el-container的时候,都知道会在这边放一个router-view :
同时在App.vue中配置一下:
同样的道理,我想很久才明白类似的道理,既然这边会放,这二级导航也应该要放啊,路由里面配了子路由,那一样的导航不是一样的道理么,所以,在system.vue中,内容是和App.vue中应该是一样的,所以:在system.vue中的配置如下
这样,面包屑和侧导航栏就能形成联动了,搞定!
多提一嘴,Element-UI在el-menu 中有个router的属性,这个很方便,大家记得要用,加了这个属性,它会将el-menu-item中的index的值作为path进行路由跳转,这个就是index的用法。