Vue嵌套路由

1. 嵌套路由就是路由下还有路由，即子路由。写法：在router.js中对应的父路由的children属性下写子路由

import Vue from 'vue'
import Router from 'vue-router'
//下面的路径引入
import Home from './views/Home.vue'
import About from './views/About.vue'
import Community from './views/Community.vue'
import Learn from './views/Learn.vue'
import Study from './views/Study.vue'
//下面引入路由community的子路由
import Academic from './components/community/Academic.vue'
import Personal from './components/community/Personal.vue'
import Download from './components/community/Download.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
      // component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
    },
    {
      path: '/community',
      name: 'community',
      component: Community,
      children: [
        {
          path: '/community/Academic',
          name: 'academic',
          component: Academic
        },
        {
          path: '/community/Personal',
          name: 'personal',
          component: Personal
        },
        {
          path: '/community/Download',
          name: 'download',
          component: Download
        },
      ]
    },
    {
      path: '/learn',
      name: 'learn',
      component: Learn
    },
    {
      path: '/study',
      name: 'study',
      component: Study
    },
  ],
  mode: 'history'
})

2.  在父路由community组件中使用子路由的标签router-link和router-view

<template>
<div class="community">
  <router-link :to="{name: 'academic'}">学术</router-link>
  <router-link :to="{name: 'personal'}">个人</router-link>
  <router-link :to="{name: 'download'}">下载</router-link>
  <router-view></router-view>
</div>

</template>

<script>
export default {

}
</script>
<style>

</style>

3. 给每个子路由设置样式，记得吗？默认router-link是a标签

<template>
<div class="community">
  <div class="nav">
    <router-link :to="{name: 'academic'}">学术</router-link>
    <router-link :to="{name: 'personal'}">个人</router-link>
    <router-link :to="{name: 'download'}">下载</router-link>
  </div>
  <router-view></router-view>
</div>

</template>

<script>
export default {

}
</script>
<style>
  .nav a {
    display: inline-block;
    width: 60px;
    line-height: 30px;
    background-color: #999;
    color: #fff;
    padding: 10px;
    margin-left: 30px;
  }
</style>

4. 重定向路由，就是下面这种效果：当点击父路由Community时，子路由的Academic自动显示出来。

在router.js中Community路由中添加redirect属性

   {
      path: '/community',
      name: 'community',
      component: Community,
      redirect: '/community/Academic',
      children: [
        {
          path: '/community/Academic',
          name: 'academic',
          component: Academic
        },