在實際專案中我們會碰到多層巢狀的元件組合而成，但是我們如何實現巢狀路由呢？因此我們需要在 VueRouter 的引數中使用 children 配置，這樣就可以很好的實現路由巢狀。

index.html，只有一個路由出口

<div id="app">
    <!-- router-view 路由出口, 路由匹配到的元件將渲染在這裡 -->
    <router-view></router-view>
</div>
main.js，路由的重定向，就會在頁面一載入的時候，就會將home元件顯示出來，因為重定向指向了home元件，redirect的指向與path的必須一致。children裡面是子路由，當然子路由裡面還可以繼續巢狀子路由。
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
 
//引入兩個元件
import home from "./home.vue"
import game from "./game.vue"
//定義路由
const routes = [
    { path: "/", redirect: "/home" },//重定向,指向了home元件
    {
        path: "/home", component: home,
        children: [
            { path: "/home/game", component: game }
        ]
    }
]
//建立路由例項
const router = new VueRouter({routes})
 
new Vue({
    el: '#app',
    data: {
    },
    methods: {
    },
    router
})
home.vue，點選顯示就會將子路由顯示在出來，子路由的出口必須在父路由裡面，否則子路由無法顯示。
<template>
    <div>
        <h3>首頁</h3>
        <router-link to="/home/game">
            <button>顯示<tton>
        </router-link>
        <router-view></router-view>
    </div>
</template>
game.vue
<template>
    <h3>遊戲</h3>
</template>

執行後的結果：

點選顯示後：