VUE路由跳转后如何动态设置当前菜单高亮

Question

问题是这样的，当点1之后 ，地址栏变成了/url/1了，此时（跳转路由后），让1这个index变成（比如红色的样式），点3 就让3变成红色
部分代码如下
<div class="btn-toggle">

  <span v-for="index in classA" ref="classA"
        @click="goBtns(index)"
        :class="[count==index?'delColor':'delColorFrist']"
  >
    {{index}}
  </span>
</div>

methods:{

    goBtns(index){
      this.count=index;
      console.log(this.count)
      this.$router.push({path:'/ImgChild/'+
      (index-1)});
    },
    
    
    因为有      this.$router.push({path:'/ImgChild/'+
      (index-1)}); 使得效果就没有了，有什么办法呢？

Answer 1

除了楼上的方法，还可以在菜单组件 watch $route, 根据route的params 来跟你的菜单标识 匹配，如果一样就高亮

Answer 2

可以用router-link标签替换，路由的文档里说了：router-link的tag属性可以替换标签，然后在页面激活时自动带样式的，默认样式名router-link-active。
具体可以看API文档：https://router.vuejs.org/zh-c...

Answer 3

这个不需要跳转呀，下面的相当于导航是不变的，中间是router-view 然后根据点击切换视图就可以了，

Answer 4

那就在路由钩子里做判断吧,试一试

Answer 5

通过@click里面的参数也可以动态加select从而高亮。

Answer 6

多看看文档
不出以外会带有一个 router-link-active class

Answer 7

像这样，其中 cur 是高亮样式 ：

Answer 8

触发导航的时候页面是重载的，所以你点击之后没有按照你点击的index去渲染节点，在data里面写selected：this.$root.$route.params.id ,然后渲染选中效果中index改成selected就可以了
:class="[count==selected?'delColor':'delColorFrist']"