Vue 爬坑之旅--嵌套路由默认选中第一个子路由,并且主路由和子路由都处于激活状态

在实际开发中,嵌套路由经常会用到,基本用法也很简单,今天要说的不是嵌套路由怎么用,而是在用的过程中发现的二点小细节的处理。

嵌套路由中默认选中第一个子路由

Vue 爬坑之旅--嵌套路由默认选中第一个子路由,并且主路由和子路由都处于激活状态_第1张图片

在一个这样的界面中,底部的五个 tab 显然应该是五个路由,现在在首页这个路由下面又有三个 tab,那么这三个 tab 就应该使用子路由来实现,路由代码如下:

        {
            path: '/home',
            name: 'Home',
            component: Home,
            children: [
                {
                    path: 'dynamic',
                    name: 'dynamic',
                    component: Dynamic
                },
                {
                    path: 'trade',
                    name: 'trade',
                    component: HomeTrade
                },
                {
                    path: 'info',
                    name: 'name',
                    component: Info
                }
            ]
        },

这样写的话,路由是有了,点击 tab 也能进行相应的切换,但是一般情况下我们需要在点击底部 首页 的 tab 的时候让子路由默认处于选中状态并加载出数据,要想一进入页面就让第一个子路由处于选中状态,可以给主路由加一个重定向的属性,把路径指向相应的子路由。

        {
            path: '/home',
            name: 'Home',
            //重定向
            redirect: '/home/dynamic',
            component: Home,
            children: [
                ......
            ]
        },

让主路由和子路由同时处于选中状态

router-link 作为 vue 中的路由跳转标签,它内置有一个选中的状态,当处于当前路由时,会给 router-link 加一个 router-active-class,即选中状态的 class,同时还提供有一个 exact 属性,当加了 exact 属性的时候表示精确匹配,也就是会精确匹配 Url,所以如果给主路由设置了 exact 属性的话,当处于子路由时,Url 就匹配不到主路由了,那么主路由也就不会处于选中状态。所以解决办法就是不要在主路由和子路由的 router-link 上设置 exact 属性,问题即可解决。

你可能感兴趣的:(Vue,Vue,爬坑之旅)