Vue路由vue-router怎么應(yīng)用

這篇文章主要講解了“Vue路由vue-router怎么應(yīng)用”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“Vue路由vue-router怎么應(yīng)用”吧！

前端路由的發(fā)展歷程

路由的概念在軟件工程中出現(xiàn)，最早是在后端路由中實(shí)現(xiàn)的，原因是web的發(fā)展主要經(jīng)歷了這樣一些階段：

• 后端路由階段；

• 前后端分離階段；

• 單頁(yè)面富應(yīng)用（SPA）；

1. 后端路由階段

早起的網(wǎng)站開(kāi)發(fā)整個(gè)HTML頁(yè)面是由服務(wù)器來(lái)渲染的，即服務(wù)器直接生產(chǎn)渲染好對(duì)應(yīng)的HTML頁(yè)面, 返回給客戶(hù)端進(jìn)行展示。如圖：

優(yōu)點(diǎn)：利于SEO優(yōu)化

缺點(diǎn)：整個(gè)頁(yè)面由后端人員維護(hù)，HTMl代碼以及數(shù)據(jù)對(duì)應(yīng)邏輯會(huì)混合一起，編寫(xiě)和維護(hù)十分糟糕。

2. 前后端分離

**前端渲染：**每次請(qǐng)求涉及到的靜態(tài)資源都會(huì)從靜態(tài)資源服務(wù)器獲取，這些資源包括HTML+CSS+JS，然后在前端對(duì)這些請(qǐng)求回來(lái)的資源進(jìn)行渲染?？蛻?hù)端的每一次請(qǐng)求，都會(huì)從靜態(tài)資源服務(wù)器請(qǐng)求文件，這個(gè)時(shí)候的后端就只是負(fù)責(zé)提供API了。

前后端分離：

• 后端只負(fù)責(zé)提供API，前端通過(guò)Ajax 獲取數(shù)據(jù)后通過(guò)JavaScript將數(shù)據(jù)渲染到頁(yè)面

• 后端專(zhuān)注于數(shù)據(jù)，前端專(zhuān)注于交互和可視化

單頁(yè)面(SPA)富應(yīng)用階段：

• 在前后端分離的基礎(chǔ)上加了一層前端路由，前端來(lái)維護(hù)一套路由規(guī)則

• 核心：改變頁(yè)面URL，但不進(jìn)行頁(yè)面刷新。

認(rèn)識(shí) vue-router

安裝 Vue-Router

npm install vue-router

步驟：

• 創(chuàng)建路由需要映射的組件

• 通過(guò)createRouter創(chuàng)建路由對(duì)象，并且傳入routes和history模式

• 使用app注冊(cè)路由對(duì)象（use方法）

• 路由使用: 通過(guò)和和

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

import Home from "../views/Home.vue"
import About from "../views/About.vue"
// 創(chuàng)建一個(gè)路由：映射關(guān)系
const router = new createRouter({
  history: createWebHashHistory(),
  routes: [
    {
      path: "/",
      redirect: "/home"
    },
    {
      path: "/home",
      component: Home
    },
    {
      path: "/about",
      component: About
    }
  ]
})

export default router

補(bǔ)充：路由的其他屬性

name屬性：記錄路由獨(dú)一無(wú)二的名稱(chēng);

meta屬性：自定義數(shù)據(jù)

router-link（補(bǔ)充）

router-link事實(shí)上有很多屬性可以配置：

• to屬性： 是一個(gè)字符串，或者是一個(gè)對(duì)象

• replace屬性： 設(shè)置 replace 屬性的話(huà)，當(dāng)點(diǎn)擊時(shí)，會(huì)調(diào)用 router.replace()，而不是 router.push()。一般是不使用relace屬性，給用戶(hù)的體驗(yàn)感不是很好。

• active-class屬性： 設(shè)置激活a元素后應(yīng)用的class，默認(rèn)是router-link-active

• exact-active-class屬性： 鏈接精準(zhǔn)激活時(shí)，應(yīng)用于渲染的 的 class，默認(rèn)是router-link-exact-active；

路由懶加載

問(wèn)題：當(dāng)打包構(gòu)建應(yīng)用時(shí)，JavaScript 包會(huì)變得非常大，影響頁(yè)面加載

解決：把不同路由對(duì)應(yīng)的組件分割成不同的代碼塊，然后當(dāng)路由被訪(fǎng)問(wèn)的時(shí)候才加載對(duì)應(yīng)組件。同時(shí)也可提高首屏渲染的效率。其中，Vue-Router 默認(rèn)就支持動(dòng)態(tài)來(lái)加載組件。因?yàn)閏omponent可以傳入一個(gè)組件，也可以接收一個(gè)函數(shù)，該函數(shù)需要放回一個(gè)Promise。import函數(shù)就是返回一個(gè)Promise

動(dòng)態(tài)路由

1. 動(dòng)態(tài)路由的基本匹配

將給定匹配模式的路由映射到同一個(gè)組件。以根據(jù)自己不同的需求加載不同的路由，做到不同的實(shí)現(xiàn)及頁(yè)面的渲染。

動(dòng)態(tài)路由的使用一般是結(jié)合角色權(quán)限控制一起使用。

例如：有一個(gè) User 組件，它應(yīng)該對(duì)所有用戶(hù)進(jìn)行渲染，但是用戶(hù)的ID是不同的。我們可以在路徑中使用一個(gè)動(dòng)態(tài)字段來(lái)實(shí)現(xiàn)，我們稱(chēng)之為 路徑參數(shù)。接著在中實(shí)現(xiàn)跳轉(zhuǎn)。

2. 獲取動(dòng)態(tài)路由的值

獲取動(dòng)態(tài)路由的值(例如上面例子中 用戶(hù)id 123)，在template中，直接通過(guò) $route.params獲取值。

• 在created中，通過(guò) this.$route.params獲取值

• 在setup中，我們要使用 vue-router庫(kù)給我們提供的一個(gè)hook useRoute

3. NotFound

對(duì)于沒(méi)有匹配到相應(yīng)的路由，我們可以給用戶(hù)匹配一個(gè)固定的頁(yè)面。通過(guò) $route.params.pathMatch獲取到傳入的參數(shù)

路由的嵌套

組件的本身也有組件需要內(nèi)部切換，這個(gè)時(shí)候就可以采用嵌套路由，在第一層路由中也使用router-view來(lái)占位之后需要渲染的組件。

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

編程式導(dǎo)航

1. 代碼的頁(yè)面跳轉(zhuǎn)

通過(guò)代碼來(lái)控制頁(yè)面的跳轉(zhuǎn)

栗子：點(diǎn)擊一個(gè)按鈕跳轉(zhuǎn)頁(yè)面

2. query 方式的參數(shù)

通過(guò)query的方式來(lái)傳遞參數(shù)，在界面中通過(guò) $route.query 來(lái)獲取參數(shù)。

3. 替換當(dāng)前的位置

使用push的特點(diǎn)是壓入一個(gè)新的頁(yè)面，那么在用戶(hù)點(diǎn)擊返回時(shí)，上一個(gè)頁(yè)面還可以回退，但是如果我們希望當(dāng)前頁(yè)面是一個(gè)替換 操作，那么可以使用replace。這個(gè)時(shí)候已經(jīng)不能回退了。

4. 頁(yè)面的前后跳轉(zhuǎn)

• router 的 go 方法（指定向前(向后)跳轉(zhuǎn)幾步）

• router 的back 方法 （回溯歷史，向后一步）

• router 的forward 方法（歷史中前進(jìn)，向前一步）

動(dòng)態(tài)添加路由

場(chǎng)景：根據(jù)用戶(hù)的不同權(quán)限，注冊(cè)不同的路由

補(bǔ)充：路由的其他方法

刪除路由有以下三種方式：

• 方式一：添加一個(gè)name相同的路由；

• 方式二：通過(guò)removeRoute方法，傳入路由的名稱(chēng)；

• 方式三：通過(guò)addRoute方法的返回值回調(diào)；

router.hasRoute()：檢查路由是否存在。

router.getRoutes()：獲取一個(gè)包含所有路由記錄的數(shù)組。

路由導(dǎo)航守衛(wèi)

vue-router 提供的導(dǎo)航守衛(wèi)主要用來(lái)通過(guò)跳轉(zhuǎn)或取消的方式守衛(wèi)導(dǎo)航

全局的前置守衛(wèi)==beforeEach==是在導(dǎo)航觸發(fā)時(shí)會(huì)被回調(diào)的,它有兩個(gè)參數(shù)：

• to：即將進(jìn)入的路由Route對(duì)象；

• from：即將離開(kāi)的路由Route對(duì)象；

返回值：

• false：取消當(dāng)前導(dǎo)航；

• 不返回或者undefined：進(jìn)行默認(rèn)導(dǎo)航；

• 返回一個(gè)路由地址：可以是一個(gè)String類(lèi)型的路徑也可以是一個(gè)對(duì)象

1. 登錄守衛(wèi)功能

場(chǎng)景：只有登錄了的用戶(hù)才能看到的頁(yè)面

2. 其他導(dǎo)航守衛(wèi)

Vue還提供了很多的其他守衛(wèi)函數(shù)，目的都是在某一個(gè)時(shí)刻給予回調(diào)，可以更好的控制程序的流程或者功能

[導(dǎo)航守衛(wèi)](導(dǎo)航守衛(wèi) | Vue Router (vuejs.org))

流程：

• 導(dǎo)航被觸發(fā)。

• 在失活的組件里調(diào)用 beforeRouteLeave 守衛(wèi)。

• 調(diào)用全局的 beforeEach 守衛(wèi)。

• 在重用的組件里調(diào)用 beforeRouteUpdate 守衛(wèi)(2.2+)。

• 在路由配置里調(diào)用 beforeEnter。 ? 解析異步路由組件。

• 在被激活的組件里調(diào)用 beforeRouteEnter。

• 調(diào)用全局的 beforeResolve 守衛(wèi)(2.5+)。

• 導(dǎo)航被確認(rèn)。

• 調(diào)用全局的 afterEach 鉤子。

• 觸發(fā) DOM 更新。

• 調(diào)用 beforeRouteEnter 守衛(wèi)中傳給 next 的回調(diào)函數(shù)，創(chuàng)建好的組件實(shí)例會(huì)作為回調(diào)函數(shù)的參數(shù)傳入。

感謝各位的閱讀，以上就是“Vue路由vue-router怎么應(yīng)用”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)Vue路由vue-router怎么應(yīng)用這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！