VueRouter嵌套路由的通信问题

Question

使用 VueRouter 做一个底部导航栏, 通过变量 tabbarPage 改变底部的高亮状态, 通过以下代码可以实现.Index.vue的代码:    <template>         <div class="index-page">             <router-view></router-view>             <van-tabbar v-model="tabbarPage">                 <!-- van-tabbar-item 中的 to 同 router-link 的 to -->                 <van-tabbar-item v-for="tabbar in tabbarList" :to="'/index' + tabbar.routerLink">                     ...                </van-tabbar-item>             </van-tabbar>         </div>     </template>但是出现了以下的问题:现在需要在 router-view 里面也能进行跳转, 即改变 tabbarPage 的值, 怎么样才能让子组件的事件在父组件接收?如/index/a => /index/b 这样的跳转中, 我尝试在 Index.vue 中 watch $route 的改变或者使用beforeRouteEnter / beforeRouteUpdate / beforeRouteLeave, 但是都无法监听变化, 而在子组件中就可以. 为什么父组件(Index.vue)不能监听变化, 要如何监听?

Answer 1

使用vuex存储导航栏当前选中项