框架中侧边菜单被选中时,会跳转到该菜单所绑定的路由,如果恰好该路由没有和任何一个菜单绑定,那么该菜单就会丢掉选中项。那么如何自定义选中项呢,每个框架都提供了一种默认选中
的方式,这就为我们设置选中提供了解决办法,这里说明一个问题,设置选中和点击后跳转到对应路由不是一个概念,不要误认为设置了选中,就会跳转到对应路由,我们设置的home
页或者默认打开的路由只所以让菜单显示了高亮,不是因为打开了路由,而是我们使用了显示高亮的方法。
好了,话不多说,怎么解决问题呢?
其实方法有很多,
其一,在路由的全局钩子去设置要高亮显示的菜单,然而页面少的时候这种方式还是很好的,如果多了,我们不得不提供更为复杂的数组模型去匹配相应的路由,这种看起来似乎有点麻烦。
其二,解铃还须系铃人,既然我们的侧边是管理路由的,其不高亮也是因为我们是通过路由的调转,而非点击了菜单,那么我们只需要让默认选中的属性与路由相绑定即可,也就是说我们可以通过给路由添加一些信息来告诉组件的默认选中属性该选中谁。
说了这么多,给大家做个演示
这里以element
作为演示
利用路由中meta属性添加我们想要的结果,当然你也可以自定义其他的属性
不过meta
是路由提供的,写在这里更为规范
如何在这种简单的2级嵌套路由中,实现多级面包屑展示呢?请参考我的另一篇文章
两级视图多层次面包屑展示