vue-router嵌套路由，默认子路由设置

需求：
1. 底部5个tab选项卡
2. 其中一个里面又有tab选项卡
3. 显示active状态
4. 底部选项卡和子路由的选项卡都默认选择第一个选项卡

举个栗子：

示例是随便写的。

1.路由文件 router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import Brand from '@/components/Brand'
import Cart from '@/components/Cart'
import Member from '@/components/Member'
import Me from '@/components/Me'
import BrandA from '@/components/BrandA'
import BrandB from '@/components/BrandB'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/brand',
      component: Brand,
      redirect: '/brand/brand-a',
      children: [
        {
          path: 'brand-a',
          name: 'BrandA',
          component: BrandA
        },
        {
          path: 'brand-b',
          name: 'BrandB',
          component: BrandB
        }
      ]
    },
    {
      path: '/cart',
      name: 'Cart',
      component: Cart
    },
    {
      path: '/member',
      name: 'Member',
      component: Member
    },
    {
      path: '/me',
      name: 'Me',
      component: Me
    }
  ]
})

2.底部选项卡 Tabs.vue

<template>
  <div class="tabs">
    <ul>
      <router-link to="/" tag="li" exact>
        <div>
          <i class="icon iconfont icon-home"></i>
        </div>
        <div>Home</div>
      </router-link>
      <router-link to="/brand" tag="li">
        <div>
          <i class="icon iconfont icon-zuanshi"></i>
        </div>
        <div>Brand</div>
      </router-link>
      <router-link to="/cart" tag="li">
        <div>
          <i class="icon iconfont icon-gouwucheman"></i>
        </div>
        <div>Cart</div>
      </router-link>
      <router-link to="/member" tag="li">
        <div>
          <i class="icon iconfont icon-huiyuanqia"></i>
        </div>
        <div>Member</div>
      </router-link>
      <router-link to="/me" tag="li">
        <div>
          <i class="icon iconfont icon-wo"></i>
        </div>
        <div>Me</div>
      </router-link>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'Tabs',
  data () {
    return {

    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.tabs {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  background: #fff;
  padding: 5px 0;
}
.tabs ul {
  display: table;
  width: 100%;
}
.tabs ul li {
  display: table-cell;
  font-size: 16px;
}
.router-link-active {
  color: #f06;
}
</style>

3.Brand.vue 底部选项卡其中一个页面（里面含有子路由）

<template>
  <div class="brand">
    <h1>Brand</h1>
    <BrandTab></BrandTab>
  </div>
</template>

<script>
import BrandTab from "./BrandTab.vue"
export default {
  name: 'Brand',
  data () {
    return {

    }
  },
  components: {
    BrandTab
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

4.BrandTab.vue（Brand里面含有子路由的Tab）

<template>
  <div class="brand-tab">
    <ul>
      <router-link to="brand-a" tag="li" exact>
        <div>Brand-A</div>
      </router-link>
      <router-link to="brand-b" tag="li">
        <div>Brand-B</div>
      </router-link>
    </ul>
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'BrandTab',
  data () {
    return {

    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.brand-tab ul {
  width: 100%;
  display: table;
}
.brand-tab ul li {
  display: table-cell;
  border-bottom: 2px solid #ccc;
  padding: 4px 0;
}
.router-link-active {
  color: red;
  border-bottom: 2px solid red !important;
}

</style>