為什麼要設定路由呢？

過去的網頁大多是 Multi Page Application(多頁式應用程式)，一個網頁畫面對應到一個網址，當切換一個網址就換開啟一份 HTML 文件。
相對的 SPA(Single Page Application 單頁應用程式) 因為只有一個網頁，所以我們需要告訴路由器什麼時候要將組件 (components) 反映到路由(routes)，再渲染出網頁畫面。

可以從架構上看到 SPA 只會生成一支 index.html(APP.html)，而網頁的切換就是靠路由器來設定。

首先，引入 CDN

<script src="https://unpkg.com/vue@3"></script>
<script src="https://unpkg.com/vue-router@4"></script>

建立路由器實例

let router = new VueRouter({
})

綁定到根組件

new Vue ({
    el: '#app',
    router,
})

在路由器裡定義路由的路線

• path: 設定網址路徑
• name: 用來管理路由，因為有時候網址名稱很長，乍看之下會不知道網頁內容是什麼
• compontent: 綁定每個路由要呈現的組件

// component 組件
let Home = {
    template: `<h1>主頁</h1>`,
    data(){
        return{
        }
    }
}
let DetailPage = {
    template: `<h1>內頁</h1>`,
    data(){
        return{
        }
    }
}

// 建立路由
let router = new VueRouter({
    routes:[
        {
            path: '/',
            name: 'index',
            component: Home
        },
        {   // 內頁
            path: '/pdp/:id', 
            name: 'product-detail-page',
            component: DetailPage
        },
        {   
            path: '*',
            name: 'notFound',
            redirect: '/'  // 不符合以上路徑，都會返回 index 頁面
        }
    ]
})

// 綁定根組件
new Vue({
    el:'#app',
    router,
})

最後，將 router-view 對應到網頁要呈現的位置，組件就會被渲染出來了

<div id='app'>
    <header></header>
    
    <router-view></router-view>
    
    <footer></footer>
</div>

參考來源：
https://next.router.vuejs.org/zh/guide/
https://www.youtube.com/watch?v=aYlihfn-Gmg