框架中侧边菜单所关联路由在进入其他路径时丢掉选中的问题

11 篇文章 1 订阅
7 篇文章 0 订阅

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

在这里插入图片描述
如何在这种简单的2级嵌套路由中,实现多级面包屑展示呢?请参考我的另一篇文章
两级视图多层次面包屑展示

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值