关于Vue Router嵌套路由的一个问题

Question

像上图所表示的，左侧有一个router-view，是tab1和tab2的路由出口，tab1的组件里有个item a，tab2的组件里有个item b。当我点击itema或者itemb时，我希望右边的router-view可以匹配到tab1/itema或者tab2/itemb。

应该怎么做？最好有相关的例子！感激不尽！

Answer 1

有两种方法，第一种就是我现在用的，点击事件发生，路由跳转，在home页面监听router路由发生变化

watch: {
        '$route'(toRouter,fromRouter){
            switch(this.$route.path){
                case '/': this.navigation_flag='0';break;
                case '/life': this.navigation_flag='1';break;
                case '/read': this.navigation_flag='3';break;
                case '/index': this.navigation_flag='2';break;
                default: break;
            }
        }
    }

当路由发生变化时，this.navigation_flag也会发生变化，而这个变量对应的就是路由的导航条的变化

<a :class="['navigation_text',navigation_flag=='0'?'navigation_a_visited':'']" @click="toPage('','0')">首页</a>
<a :class="['navigation_text',navigation_flag=='1'?'navigation_a_visited':'']" @click="toPage('life','1')">生活</a>
<a :class="['navigation_text',navigation_flag=='3'?'navigation_a_visited':'']" @click="toPage('read','2')">阅读</a>

这样在home页面基本就完成了你所说的功能。
第二种方法是：如果你用的是vue3，是有带vuex的全局状态管理的，这时候你可以你用路由的生命周期，beforeRouter（）函数，在路由事件生效前就可以更改全局状态，从而通过全局状态去动态改变路由连接也就是导航条的改变。如果还有问题可以评论讨论一下哈