Vue基于Element-UI实现侧导航栏和面包屑联动

记录踩坑的两个地方。 

两个都是关于侧导航栏的部分，涉及到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的用法。