[youzan/vant]tabbar在点击切换路由后颜色并没激活，需要再点击一次

上面代码发布有问题，重发

<template>
  <!-- 主框架页面 -->
  <div id="main-page">
    <!-- <transition :name="transitionName"> -->
    <!-- @after-leave="afterLeave" -->
    <router-view class="main-content child-view" />
    <!-- </transition> -->
    <van-tabbar
      v-model="active"
      @change='handleTabbarChange'
    >
      <van-tabbar-item
        icon="tabbar-home"
        to="home"
      >首页</van-tabbar-item>
      <van-tabbar-item
        icon="tabbar-find"
        to="find"
      >查找</van-tabbar-item>
      <van-tabbar-item
        icon="tabbar-msg"
        to="cart"
      >消息</van-tabbar-item>
      <van-tabbar-item
        icon="tabbar-cart"
        to="cart"
      >购物车</van-tabbar-item>
      <van-tabbar-item
        icon="tabbar-mine"
        to="mine"
      >我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

找到问题了，我在root节点使用了vue-navigation插件， van-tabbar和vue-navigation有冲突， 我该如何解决？

change 事件怎么写

请问你解决这个问题了嘛，我也出现了这个问题，我只引用了这个tabbar组件，在做路由跳转的页面图标颜色并没有激活

注意如果在 A 页面和 B 页面都渲染了一个 Tabbar 组件，这两个 Tabbar 的状态是不共享的，单页面应用可以把 Tabbar 放到 router-view 外面

我在APP.vue页面放的tabbar组件，其他子页面跳转至tabbar页面时使用$emit通知APP修改active的值，结果在APP页面获取到传过来的active值，也使用this.active = active; 但是不起效果

我在APP.vue页面放的tabbar组件，其他子页面跳转至tabbar页面时使用$emit通知APP修改active的值，结果在APP页面获取到传过来的active值，也使用this.active = active; 但是不起效果

我在app.vue页面放的tabbar组件，其他二级页面返回tabbar页面时tabbar的高亮颜色是上上一次选择的。我只能通过watch route来重置activeIndex校正。

export default {
  name: "App",
  data() {
    return {
      activeIndex: 0,
      items: tabItems
    };
  },
  watch: {
    $route(to, from) {
      console.log("watch route: to=" + to.path + ", from=" + from.path);
      switch (to.path) {
...
        case "/more":
          this.activeIndex = 3;
          break;
        case "/":
        case "/home":
        default:
          this.activeIndex = 0;
          break;
      }
    }
  },
  methods: {
    onChange(index) {
      this.activeIndex = index;
    }
  }
};

多页面是不共享active的，可将该组件放到App.vue