一文深入詳解Vue路由：vue-router

本篇文章帶大家詳解全家桶中的Vue-Router，瞭解一下路由的相關知識，希望對大家有所幫助！

如何快速入門VUE3.0：進入學習

前端路由的發展歷程

路由的概念在軟體工程中出現，最早是在後端路由中實現的，原因是web的發展主要經歷了這樣一些階段：

後端路由階段；
前後端分離階段；
單頁面富應用（SPA）；

1. 後端路由階段

早起的網站開發整個HTML頁面是由伺服器來渲染的，即伺服器直接生產渲染好對應的HTML頁面, 返回給使用者端進行展示。如圖：

優點：利於SEO優化

缺點：整個頁面由後端人員維護，HTMl程式碼以及資料對應邏輯會混合一起，編寫和維護十分糟糕。

2. 前後端分離

**前端渲染：**每次請求涉及到的靜態資源都會從靜態資源伺服器獲取，這些資源包括HTML+CSS+JS，然後在前端對這些請求回來的資源進行渲染。使用者端的每一次請求，都會從靜態資源伺服器請求檔案，這個時候的後端就只是負責提供API了。

前後端分離：

後端只負責提供API，前端通過Ajax 獲取資料後通過JavaScript將資料渲染到頁面
後端專注於資料，前端專注於互動和視覺化

單頁面(SPA)富應用階段：

在前後端分離的基礎上加了一層前端路由，前端來維護一套路由規則
核心：改變頁面URL，但不進行頁面重新整理。

認識 vue-router

安裝 Vue-Router

npm install vue-router

步驟：

建立路由需要對映的元件【相關推薦：】
通過createRouter建立路由物件，並且傳入routes和history模式
使用app註冊路由物件（use方法）
路由使用: 通過和和

import { createRouter, createWebHashHistory } from "vue-router"

import Home from "../views/Home.vue"
import About from "../views/About.vue"
// 建立一個路由：對映關係
const router = new createRouter({
  history: createWebHashHistory(),
  routes: [
    {
      path: "/",
      redirect: "/home"
    },
    {
      path: "/home",
      component: Home
    },
    {
      path: "/about",
      component: About
    }
  ]
})

export default router

補充：路由的其他屬性
name屬性：記錄路由獨一無二的名稱;
meta屬性：自定義資料

router-link（補充）

router-link事實上有很多屬性可以設定：

to屬性：是一個字串，或者是一個物件
replace屬性：設定 replace 屬性的話，當點選時，會呼叫 router.replace()，而不是 router.push()。一般是不使用relace屬性，給使用者的體驗感不是很好。
active-class屬性：設定啟用a元素後應用的class，預設是router-link-active
exact-active-class屬性：連結精準啟用時，應用於渲染的的 class，預設是router-link-exact-active；

路由懶載入

問題：當打包構建應用時，JavaScript 包會變得非常大，影響頁面載入

解決：把不同路由對應的元件分割成不同的程式碼塊，然後當路由被存取的時候才載入對應元件。同時也可提高首屏渲染的效率。其中，Vue-Router 預設就支援動態來載入元件。因為component可以傳入一個元件，也可以接收一個函數，該函數需要放回一個Promise。import函數就是返回一個Promise

動態路由

1. 動態路由的基本匹配

將給定匹配模式的路由對映到同一個元件。以根據自己不同的需求載入不同的路由，做到不同的實現及頁面的渲染。

動態路由的使用一般是結合角色許可權控制一起使用。
例如：有一個 User 元件，它應該對所有使用者進行渲染，但是使用者的ID是不同的。我們可以在路徑中使用一個動態欄位來實現，我們稱之為路徑引數。接著在中實現跳轉。

2. 獲取動態路由的值

獲取動態路由的值(例如上面例子中使用者id 123)，在template中，直接通過 $route.params獲取值。

在created中，通過 this.$route.params獲取值
在setup中，我們要使用 vue-router庫給我們提供的一個hook useRoute

3. NotFound

對於沒有匹配到相應的路由，我們可以給使用者匹配一個固定的頁面。通過 $route.params.pathMatch獲取到傳入的引數

路由的巢狀

元件的本身也有元件需要內部切換，這個時候就可以採用巢狀路由，在第一層路由中也使用router-view來佔位之後需要渲染的元件。

{
      path: "/home",
      component: () => import("../views/Home.vue"),
      children: [
        {
          path: "/show",
          component: () => import("../views/component/show.vue")
        },
        {
          path: "/detail",
          component: () => import("../views/component/detail.vue")
        }
      ]
    },