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

小丑先生
  • 8

question.jpg

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

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

评论
阅读 469
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()函数,在路由事件生效前就可以更改全局状态,从而通过全局状态去动态改变路由连接也就是导航条的改变。如果还有问题可以评论讨论一下哈

撰写回答

登录后参与交流、获取后续更新提醒

宣传栏