在傳統網頁開發中，我們常常會繪製一個類似下方的網頁架構圖，有些接案的朋友還會依照頁面數量跟業主來收取費用，因為過去的網頁開發，通常是一頁一頁製作的，許多重複性的項目，例如選單、頁首、頁尾…等等，在每一頁都要複製貼上，萬一出現錯誤還要一頁一頁的修改，十分浪費時間。

在前幾篇文章提到，vue可以透過元件化的方式進行如下圖的開發，達到快速修改的目的

這樣雖然方便，但如果我們想區分多個頁面想要讓使用者進行瀏覽，每個頁面又有自己獨立頁面網址的時候該怎麼做呢？這個時候我們就需要vue router來幫助我們進行了！開發上的結構會如下圖所示：

其實淡藍色的components跟綠色的元件做法上和綠色的元件沒有太大差異，但我們希望瀏覽上使用者可以透過下面這樣的路徑進行瀏覽，也方便使用者可以依自己需求加入路徑在書籤中。

• 網站首頁：http://xxx.xxx.xxx.xxx/
• 關於我們：http://xxx.xxx.xxx.xxx/#/about/
• 產品介紹：http://xxx.xxx.xxx.xxx/#/product/
• 聯繫我們：http://xxx.xxx.xxx.xxx/#/contact/

好囉！那我們就開始吧！首先準備相對應的元件（頁面）在src/components的資料夾中

頁面內容都先簡單做

Index.vue

<template>
    <div>Index</div>
</template>

About.vue

<template>
    <div>About</div>
</template>

Product.vue

<template>
    <div>Product</div>
</template>

Contact.vue

<template>
    <div>Contact</div>
</template>

接下來準備安裝vue-router，既然我們已經開始介紹vue 3.x，那vue-router也不能用舊版吧？所以我們在命令提示字元輸入（撰文時vue-router已經進入4.0.0 Beta 13的版本）

npm install vue-router@next

安裝完畢之後，我們在src/router/資料夾新增router.js檔，內容如下：

import {
    createWebHashHistory,
    createRouter
} from 'vue-router';
import Index from '@/components/Index.vue';
import About from '@/components/About.vue';
import Product from '@/components/Product.vue';
import Contact from '@/components/Contact.vue';

const history = createWebHashHistory();
const routes = [
    {
        path: '/',
        component: Index
    },
    {
        path: '/about',
        component: About
    },
    {
        path: '/product',
        component: Product
    },
    {
        path: '/contact',
        component: Contact
    },
];
const router = createRouter({
    history,
    routes,
});
export default router;

• 我們在1～4行匯入vue-router中所需要使用的方法
• 5～8行匯入我們的頁面元件
• 第10行使用URL的Hash来模擬一个完整的URL，讓URL改變時頁面不會重新載入（URL中會有#字號）
  使用createWebHistory可以模擬更類似的網址（沒有#字號），但需要後端設定上的支援，本篇暫時先不討論
• 11～28行開始決定頁面路由
• 最後29～32行將router實體新增出來
• 最後將模組匯出

接下來打開原先的main.js，新增第4行並修改第5行指令如下：

import { createApp } from 'vue'
import App from '@/App.vue'
import '@/assets/scss/main.scss';
import router from '@/router/router'
createApp(App).use(router).mount('#app');

接下來就是稍微修改我們的App.vue頁面，新增5～11行程式碼

<template>
  <h1>{{ "Please select the item you like below" }}</h1>
  <DropdownMenu :items="selectData.system"></DropdownMenu>
  <DropdownMenu :items="selectData.provider"></DropdownMenu>
  <div class="linkArea">
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-link to="/product">Product</router-link>
    <router-link to="/contact">Contact</router-link>
  </div>
  <router-view></router-view>
</template>

• 6～9這四行是在頁面上添加連結，讓使用者點選後有換頁面的感覺
• 第11行則是頁面顯示的區域，也就是頁面元件顯示的地方

接下來就可以試試看「npm run serve」之後的結果了

這樣就有模擬換頁的效果了！是不是很簡單啊！接下來會介紹一些vue-router的進階應用，敬請期待！

本次的範例檔連結