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>

但是出现了以下的问题:

1. 现在需要在 router-view 里面也能进行跳转, 即改变 tabbarPage 的值, 怎么样才能让子组件的事件在父组件接收?

2. 如/index/a => /index/b 这样的跳转中, 我尝试在 Index.vue 中 watch $route 的改变或者使用beforeRouteEnter / beforeRouteUpdate / beforeRouteLeave, 但是都无法监听变化, 而在子组件中就可以. 为什么父组件(Index.vue)不能监听变化, 要如何监听?

Answer 1

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