一、路由

main.js 中

1.引入 vue-router 包

安裝命名：cnpm i vue-router -s

import Vue from 'vue';
import app from './app.vue';

import VueRouter from 'vue-router';

2.手動安裝 VueRouter

Vue.use(VueRouter);

3.匯入元件

import account from './main/Account.vue';
import goodslist from './main/GoodsList.vue';

Account.vue 和 GoodsList.vue 元件內容（注：這兩個是新建的 .vue 模板檔案）

<template>
    <div>
        <h1>這是 Account 元件！</h1>
    </div>
</template>

<template>
    <div>
        <h1>這是 GoodsList 元件！</h1>
    </div>
</template>

4.建立路由物件

let router = new VueRouter({
    routes: [
        {path: '/account',
 
 component: account},
        {path: '/goodslist', component: goodslist},
        {path: '/', direction: goodslist}
    ]
});

5.將路由物件掛載到 vm 上

let vm = new Vue({
    el: '#app',
    render: c => c(app),
    // 注意： render 會把 el 指定的容器所有內容都覆蓋，所以不要把路由中的
    // router-view 和 router-link 直接寫到 el 所控制的元素中，而是寫進 render
 

    // 所引模組中去

    // 5.將路由物件掛載到 vm 上
    router
});

app.vue 中

6.引入路由元件

<template>
    <div>
        <h1>這是 App 元件！</h1>
        <!-- 6.引入路由元件 -->
        <router-link to="/account">Account</router-link>
        <router-link to="/goodslist">GoodsList</router-link>

        <router-view></router-view>
    </div>
</template>

二、巢狀路由

main.js 中

7.匯入 Account 的兩個巢狀子元件

import login from './subcom/login.vue';
import register from './subcom/register.vue';

login.vue 和 register.vue 元件內容（注：這兩個是新建的 .vue 模板檔案）

<template>
    <div>
        <h3>這是 Login 巢狀元件！</h3>
    </div>
</template>

<template>
    <div>
        <h3>這是 Register 巢狀元件！</h3>
    </div>
</template>

8.建立巢狀子路由物件

let router = new VueRouter({
    routes: [
        {
            path: '/account',
            component: account,
            
            // 巢狀子路由物件
            children: [
                {path: 'login', component: login},
                {path: 'register', component: register},
                {path: '/', component: register}
            ]
            
        },
        {path: '/goodslist', component: goodslist},
        {path: '/', direction: goodslist}
    ]
});

Account.vue 中

9.引入巢狀子路由元件

<template>
    <div>
        <h1>這是 Account 元件！</h1>

        <!-- 引入巢狀路由元件 -->
        <router-link to="/account/login">登入</router-link>
        <router-link to="/account/register">註冊</router-link>

        <router-view></router-view>
    </div>
</template>