vue根据路由来显示高亮选项

在做导航栏的时候，总会有这样的需求，点哪一项哪一项就高亮显示，最近发现vue的一个ui库vant,已经有这样的效果了，就不用自己写css了。

<van-tabbar v-model="active">
  <van-tabbar-item name="home" icon="home-o">标签</van-tabbar-item>
  <van-tabbar-item name="search" icon="search">标签</van-tabbar-item>
  <van-tabbar-item name="friends" icon="friends-o">标签</van-tabbar-item>
  <van-tabbar-item name="setting" icon="setting-o">标签</van-tabbar-item>
</van-tabbar>
export default {
  data() {
    return {
      active: 'home'//普通属性
    }
  }
}

看上面的代码，可以发现只要，改变的active的值，就可以让相应的标签高亮显示了，但点击标签的时候，也要跳转到相应的路由。可以van-tabbar-item中加上to属性，就可以跳转到相应的路由了。
所以，这就需要根据路由来改变active的值，这时候就可以考虑用vue的计算属性computed来改变active的值。
1.根据路由来改变，可以通过this.$route.name来获取路由的名字
2.用计算属性computed来改变active的值
最后修改后的代码如下

<van-tabbar v-model="active">
  <van-tabbar-item name="home" icon="home-o" :to="{ name: 'home'}">标签</van-tabbar-item>
  <van-tabbar-item name="search" icon="search" :to="{ name: 'search'}">标签</van-tabbar-item>
  <van-tabbar-item name="friends" icon="friends-o">标签</van-tabbar-item>
  <van-tabbar-item name="setting" icon="setting-o">标签</van-tabbar-item>
</van-tabbar>
export default {
  data() {
    return {
    }
  },
  computed: {//计算属性  
    active () {//获取到路由的名字给active赋值
      return this.$route.name
    }
  }
}

最后，要注意一下路由的名字要和标签中的name对应，要不然不会高亮显示。计算属性active和原来的普通属性active一样可以在v-model进行绑定，所以用了计算属性，把同名字普通属性删掉，要不然会报错。