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

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

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

这里写图片描述

在一个这样的界面中，底部的五个 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 属性，问题即可解决。

<template>
    <div id = "homeTabs" class = "flex homeTabs">
        <router-link to = "/home/dynamic" class = "tab" tag = "div" active-class = "active">
            <div>最新动态</div>
        </router-link>
        <router-link to = "/home/trade" class = "tab" tag = "div" active-class = "active">
            <div>最优交易</div>
        </router-link>
        <router-link to = "/home/info" class = "tab" tag = "div" active-class = "active">
            <div>资讯</div>
        </router-link>
    </div>
</template>