vant + vue2 使用Tabbar点击两次才出现高亮显示问题（已解决）

自己第一次做m端页面，用到vant的Tabbar时遇到该问题，看了很多网上的解决方法都没解决，自己搞了一下解决了。

先上代码：

<template>
  <div>
    <van-tabbar v-model="active" router>
  <van-tabbar-item icon="home-o" to="/">
        主页
  </van-tabbar-item>
  <van-tabbar-item icon="shopping-cart-o" to="/shopping">
        购物车
  </van-tabbar-item>
  <van-tabbar-item icon="manager-o" to="/BookTowm">
        我的书城
  </van-tabbar-item>

</van-tabbar>
  </div>
</template>

这是我的tabbar组件，可以引入全局使用，也可以引入部分组件使用，我都测试过没有问题，只需要在tabbar组件的生命周期函数created或者mounted函数里面写个判断就ok了。

原理就是通过路由路径更改v-model绑定的active的值。

export default {
  data() {
    return {
      active: 0,
    };
  },
  created() {
    if(this.$route.path == '/')
    this.active = 0
    else if(this.$route.path == '/shopping')
    this.active = 1
    else if(this.$route.path == '/BookTowm')
    this.active = 2
  }

记录一下自己遇到的问题，感谢观看！新手望指导。