前言

傳統網頁的網址，以往會是後端根據不同的頁面去配置不同的網址規則。

不過如果要使用 Vue 框架開發網頁，會是「單一頁面網站」 (Sigle Page Application)，俗稱的 SPA，就是說我們就只會有「一個頁面」。

這種狀況下沒辦法靠後端定義資料夾去控制路由，處理路由的工作就變成 Vue 的事情。

Vue 為此提供 Vue Router 的工具讓我們加裝在 Vue 應用程式中，讓我們可以處理路由。

這篇文章將簡單介紹 Vue Router 的基本使用方式

安裝 Vue Router

Vue 官方提供兩種 Vue Router 的使用方式

1. 直接使用 CDN

https://unpkg.com/vue-router@4.2.5/dist/vue-router.global.js

2. 使用 npm 或是 yarn

npm：

npm install vue-router@4

yarn：

yarn add vue-router@4

從專案中引入 Vue Router

使用 Vue Router 這件事情具體上來說，是在 「Vue 實體」中 使用 Router ，在那之前我們需要建立這個 Router。

1. 到 main.js 中，從 vue-router 引入 createRouter 以及 createWebHistory 方法 ：

import { createRouter, createWebHistory } from "vue-router";

createRouter 是等等會用來建立 Router 實體的工具，而 createWebHistory 是讓 Router 可以使用 HTML5 History API 的方法。

2. 用createRouter方法定義出 Router 實體：

const router = createRouter({
  history: createWebHistory(),
  routes: [],
});

3. 在 Vue 實體中使用他：

const app = createApp(App);
app.use(router); //這句
app.mount("#app");

或是用 「串」 的方式使用：

createApp(App).use(router).mount("#app");

如此一來，基本配置就完成了。

建立路由元件

會需要路由的根本原因，是因為我們有不同的頁面需要以網址做區分，所以操作順序應該是，先有頁面，才有路由。

我們可以在 src 資料夾中定義一個 pages 資料夾，新增 Home.vue 、About.vue 檔案，預計作為兩個不同的頁面：

接著回到 main.js 引入這兩個頁面元件：

import Home from "./Pages/Home.vue";
import About from "./Pages/About.vue";

在剛剛定義的 router 內把路由寫進去：

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: "/", component: Home },
    { path: "/about", component: About },
  ],
});

定義元件要出現的位置

還沒使用 Router 之前，如果要使用元件，我們會直接用元件名稱當作 HTML 標籤使用：

<Home></Home> 
<About></About>

不過在使用路由之後，我們希望透過「網址」的異動來決定哪個元件要出現。

我們可以使用一個特殊的 <router-view> 標籤來達到這件事。

<router-view></router-view>

此外，要做到網址的跳轉，原生我們會使用 <a> 標籤來完成，不過 Vue 提供一個叫做 <router-link> 的標籤來作為超連結的標籤，並且使用 to 屬性來定義跳轉路由：

<router-link to="/">往 HOME 的通道</router-link>
<router-link to="/about">往 About 的通道</router-link>

上面的內容整合起來，我們在 App.vue 的 template 內容會變這樣

<router-link to="/">往 HOME 的通道</router-link>
<router-link to="/about">往 About 的通道</router-link>

<router-view></router-view>

把 Router 的程式整理一下

上面定義 Router 的方式，是直接把程式塞在 main.js 中，但如果隨著專案的龐大，Router 的內容很可能就佔了大半。
為了維護方便，實務上通常會將 Router 抽出來定義，在把這個內容引入回 main.js。

1. 首先，先到 src 資料夾中新增 Router 資料夾，並且在裡面新增 index.js 檔案：
   

2. 把剛剛 router 需要用到的內容全部搬過去，並且用 export default 匯出：

import { createRouter, createWebHistory } from 'vue-router';
import Home from '../Pages/Home.vue'
import About from '../Pages/About.vue'

const router = createRouter({
    history: createWebHistory(),
    routes: [
        { path: '/', component: Home },
        { path: '/about', component: About },
    ],
});

export default router;

3. 回到 main.js 引入：

import router from './Router';

const app = createApp(App);
app.use(router);
app.mount('#app');

這樣就完成基本的設置了！

如果希望讓 router 內容可以更簡潔一些，也可以把 routes 抽出來定義：

const routes = [
    { path: '/', component: Home },
    { path: '/about', component: About },
]

const router = createRouter({
    history: createWebHistory(),
    routes
});

日後如果路由增加，只需調整 routes 的內容即可。