Vue3項目實踐-第三篇（vue-router 基礎篇）

内容：梳理 vue-router 的内容大綱，什麼是vue-router？為什麼需要vue-router? vue-router基本概念和安裝，了解單頁面應用（SPA）和路由的基本概念，安裝和配置 vue-router。

官方位址： https://router.vuejs.org/

GitHub: https://github.com/vuejs/router

1 vue-router 内容大綱

當深入 Vue Router 時，以下是一個内容大綱，可幫助我們逐漸了解和應用 Vue Router 的主要概念和功能：

• 基本概念和安裝
• 了解單頁面應用（SPA）和路由的基本概念
• 安裝和配置 Vue Router
• 路由配置
• 建立 Vue Router 執行個體
• 定義路由映射群組件
• 配置路由規則和參數
• 設定預設路由
• 路由導航
• 使用 <router-link> 建立導航連結
• 使用程式設計式導航進行路由跳轉
• 使用命名路由和命名視圖
• 動态路由
• 定義動态路由參數
• 通過路由參數傳遞資料
• 監聽路由參數變化
• 嵌套路由
• 建立嵌套路由結構
• 使用 <router-view> 渲染子路由元件
• 設定預設子路由
• 導航守衛
• 使用全局前置守衛進行路由攔截
• 使用路由獨享的守衛
• 使用元件内的守衛
• 路由元資訊
• 定義和使用路由元資訊
• 根據元資訊執行相應邏輯
• 路由懶加載
• 使用路由懶加載優化應用性能
• 異步加載路由元件
• 程式設計式路由
• 使用路由執行個體的方法進行程式設計式導航
• 動态路由比對和參數傳遞
• 曆史記錄管理
• 使用導航守衛控制導航行為
• 前進和後退導航
• 導航過渡效果
• 進階主題
• 使用别名和重定向
• 錯誤路由處理
• 路由模式（hash 模式和曆史模式）
• 使用第三方庫和插件與 Vue Router 內建

按照以上大綱逐漸學習和實踐，你将對 Vue Router 的核心概念和功能有更深入的了解，并能夠建構出更複雜和功能豐富的單頁面應用。

2 什麼是 vue-router？

注意：這裡的路由并不是指我們平時所說的硬體路由器，這裡的路由就是SPA（單頁應用）的路徑管理器。再通俗的說，vue-router就是WebApp的連結路徑管理系統。比如你點一個連接配接，vue-router會幫你比對到相關的視圖，并且傳回給你。

Vue Router 是 Vue.js 官方的路由管理器。

它和 Vue.js 的核心深度內建，讓建構單頁面應用變得易如反掌。

既然官網說了，VUE主要建構單頁應用，那什麼是單頁應用，SPA。

3 為什麼需要 vue-router?

Vue Router 是 Vue.js 的官方路由管理器，它用于實作單頁面應用（SPA）中的路由功能。

SPA 是一種現代的 Web 應用程式開發方式，它使用 JavaScript 動态地更新頁面内容，而不需要進行完整的頁面重新整理。

Vue Router 的主要目的是将不同的元件映射到不同的 URL，以便在使用者導航時顯示相應的視圖。

Vue Router 提供了一種簡單而強大的方式來管理應用程式的路由。它使得建構複雜的單頁面應用變得更加容易，提供了更好的使用者體驗和開發效率。無論你是建構小型項目還是大型應用程式，Vue Router 都是一個非常有用的工具。

4 基本概念和安裝

4.1 了解單頁面應用（SPA）和路由的基本概念

4.1.1單頁面應用（Single Page Application，SPA）

單頁面應用是一種 Web 應用程式的架構模式，它在加載初始 HTML 頁面後，通過 JavaScript 動态地更新頁面内容，而無需進行完整的頁面重新整理。在 SPA 中，所有的互動和頁面切換都是在同一個 HTML 頁面上進行，隻是内容的變化通過異步加載資料和更新 DOM 來實作。這種方式可以提供更流暢的使用者體驗，減少伺服器負載，以及更好的響應速度。

4.1.2路由

路由是指根據 URL 的不同路徑來确定要顯示的内容的機制。在傳統的多頁面應用中，每個頁面都有一個唯一的 URL，并且在使用者導航時，需要通過整個頁面的重新整理來加載新的内容。而在 SPA 中，路由被用來将不同的元件映射到不同的 URL，進而在使用者導航時隻更新頁面中的部分内容，而不需要重新加載整個頁面。

4.1.3URL（統一資源定位符）

URL 是一個用于定位和通路 Web 資源的位址。它包含了協定（如 HTTP、HTTPS）、域名、端口号和路徑等資訊。在 SPA 中，URL 的不同路徑對應着應用程式的不同狀态，通過改變 URL 的路徑，可以實作不同的頁面顯示和互動。

4.1.4前端路由

前端路由是指在前端應用程式中管理頁面群組件之間導航的機制。它通過監聽 URL 的變化，并根據不同的 URL 路徑加載相應的元件來實作頁面之間的切換和互動。前端路由可以幫助建構 SPA，并提供更流暢的使用者體驗。

4.1.5路由器（Router）

路由器是一個用于管理路由的工具或庫。它提供了一組 API 和機制來定義路由規則、映射元件到不同的 URL，以及監聽和處理導航事件。在 Vue.js 中，Vue Router 是官方提供的路由器，用于管理 Vue.js 應用程式中的路由。

通過使用路由器，SPA 可以更好地組織和管理頁面、實作頁面之間的無縫切換，并提供更好的使用者體驗。路由器能夠根據 URL 的變化動态地加載和渲染相應的元件，使得使用者感覺不到頁面的重新整理，同時也提供了靈活和可擴充的路由配置和導航控制機制。

4.2 安裝和配置 Vue Router

先通過指令建立一個vite的項目（npm init vite@latest），選擇 vue-ts

npm init vite@latest           

安裝依賴項：（npm install 或 npm i ）

npm install 
或 
npm i           

4.2.1 安裝 vue router

使用 npm 或 yarn 在你的 Vue.js 項目中安裝 Vue Router。

打開終端或指令提示符，并進入項目根目錄，然後運作以下指令：

npm install vue-router
或
yarn add vue-router           

4.2.2 建立路由執行個體

打開項目，删除一些無效檔案，在建立一個 router 檔案夾，建立一個 index.ts 的檔案在裡面，檔案中導入 Vue 和 Vue Router，并建立一個新的 Vue Router 執行個體。

import { createRouter } from "vue-router";

const router = createRouter({
    // 配置選項
});

export default router;           

在 main.ts 中注入 router:

import { createApp } from 'vue'

import App from './App.vue'
import router from './router'

const vueApp = createApp(App)

vueApp.use(router)

vueApp.mount('#app')           

在這個示例中，我們導入了 VueRouter，在main.ts 中通過 vueApp.use() 方法注冊 Vue Router 插件。然後，我們建立了一個名為 router 的新的 VueRouter 執行個體，并将其作為選項傳遞給 Vue 執行個體。

4.2.3配置路由規則和映射元件

在路由執行個體的配置選項中，定義你的路由規則和映射元件。這些規則指定了不同的 URL 路徑應該顯示哪個元件。可以使用 routes 數組來配置路由規則。

建立兩個元件 login.vue、reg.vue

<template>
    <h2>Login</h2>
</template>
<script lang="ts" setup>

</script>           

<template>
    <h2>Reg</h2>
</template>
<script lang="ts" setup>

</script>           

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

const routes =[
    {
        path: '/',
        component: ()=>{
            return import('../components/login.vue')
        }
    },
    {
        path: '/reg',
        component: ()=> import('../components/reg.vue')
    }
];

const router = createRouter({
    // 配置選項
    history:createWebHistory(),
    routes:routes
});

export default router;           

4.2.4使用 <router-view> 渲染元件

<router-view> 是 Vue Router 提供的一個元件，用于在 Vue.js 應用程式中渲染比對目前路由的元件内容。它充當了動态元件的容器，根據目前路由的路徑來動态加載和渲染相應的元件。

在 Vue.js 應用程式的模闆中，你可以使用 <router-view> 标簽來指定路由元件的渲染位置。當使用者導航到不同的路由時，<router-view> 會根據路由規則自動加載并渲染相應的元件。

<template>
  <h1>vue-router 基礎篇</h1>
  <RouterView></RouterView>
</template>
<script setup lang="ts">

</script>           

在這個示例中，我們将 <router-view> 放置在名為 "app" 的容器中。當使用者導航到不同的路由時，比對的元件會被渲染并替換掉 <router-view> 的位置。

需要注意的是，<router-view> 可以同時處理多個嵌套路由。當存在嵌套路由時，每個嵌套層級的 <router-view> 都會根據其所在的層級渲染對應的元件。

通過使用 <router-view>，你可以輕松地實作單頁面應用中的動态路由元件加載和渲染，為使用者提供無縫的頁面切換體驗。

4.2.4添加導航連結

在你的應用程式中，使用 <router-link> 标簽來建立導航連結。這個标簽将自動渲染成一個可點選的連結，點選後會觸發路由的切換。

<template>
  <h1>vue-router 基礎篇</h1>
  <hr />
      <router-link to="/login">Login</router-link>
      <router-link to="/reg">Reg</router-link>
  <hr />
  <RouterView></RouterView>
</template>
<script setup lang="ts">

</script>           

在這個示例中，我們使用了兩個 <router-link> 标簽來建立導航連結。to 屬性指定了連結的目标 URL 路徑，即路由規則中定義的路徑。例如，to="/" 表示導航到根路徑，to="/reg" 表示導航到 /reg 路徑。當使用者點選這些連結時，Vue Router 會自動切換到相應的路由，并渲染對應的元件到 <router-view> 中。

這是使用 <router-link> 建立導航連結的基本用法，你可以根據需要添加更多的導航連結，并設定其他屬性來自定義連結的行為和樣式。