前面我們製作了 localhost:8080/#/page 的頁面
現在我們要製作 localhost:8080/#/page/child1
localhost:8080/#/page/child2
localhost:8080/#/page/child3
三個分頁，同樣都在 /page 下

首先我們一樣先製作元件，src 資料夾底下的 components 資料夾底下的 pages 資料夾的 page.vue 先另存新檔為child1.vue,child2.vue,child3.vue 三個檔案

接著在 page.vue 檔案留下:

<template>
    <div class="hello">
        <div class="card" style="width: 18rem;">
            <router-view></router-view>
        </div>
    </div>
</template>

並加上 router-view

在 child1.vue,child2.vue,child3.vue 三個檔內留下:

<template>
    <div class="hello">
        <img src="" class="card-img-top" alt="...">
        <div class="card-body">
            <h5 class="card-title">Card 1</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
    </div>
</template>

因為我們要更換的是卡片內的內容而已

接著回到 router/index.js，把元件都載入進來:

import child1 from '@/components/pages/child1'
import child2 from '@/components/pages/child2'
import child3 from '@/components/pages/child3'

接著在 page 元件路徑的地方加上一個 children 屬性，放置的內容跟外面的路徑物件是一樣的:

export default new VueRouter({
    routes: [
    {
        ...
    },
	{
        name: '分頁',
        path: '/page',
        component: Page,
		children: [
			{
				name: '卡片',
				path: '',
				component: child1
			},
			{
				name: '卡片',
				path: '',
				component: child2
			},
			{
				name: '卡片',
				path: '',
				component: child3
			}
		]
	}
]
});

這時候如果輸入 localhost:8080/#/page/child1
localhost:8080/#/page/child2
localhost:8080/#/page/child3
就能有切換元件的功能了

但我們一樣也想有點擊連結的功能，所以在 page.vue 再加上 router-link:

<template>
    <div class="hello">
        <router-link to="/page">卡片1</router-link>
        <router-link to="/page/child2">卡片2</router-link>
        <router-link to="/page/child3">卡片3</router-link>
        <div class="card" style="width: 18rem;">
            <router-view></router-view>
        </div>
    </div>
</template>

這時候我們就可以完成點擊切換了