這篇文章主要講解了“Vue中的Router路由是什么”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“Vue中的Router路由是什么”吧！

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價值的長期合作伙伴，公司提供的服務(wù)項目有：域名申請、虛擬主機(jī)、營銷軟件、網(wǎng)站建設(shè)、新安網(wǎng)站維護(hù)、網(wǎng)站推廣。

一、前端路由的概念與原理

（1）什么是路由

路由（英文：router）就是對應(yīng)關(guān)系。

（2）SPA 與前端路由

SPA 指的是一個 web 網(wǎng)站只有唯一的一個 HTML 頁面，所有組件的展示與切換都在這唯一的一個頁面內(nèi)完成。此時，不同組件之間的切換需要通過前端路由來實現(xiàn)。（學(xué)習(xí)視頻分享：vue視頻教程）

?結(jié)論?：在 SPA 項目中，不同功能之間的切換，要依賴于前端路由來完成！

（3）什么是前端路由

通俗易懂的概念：Hash 地址與組件之間的對應(yīng)關(guān)系。

（4）前端路由的工作方式

• 用戶點擊了頁面上的路由鏈接；

• 導(dǎo)致了 URL 地址欄中的 Hash 值發(fā)生了變化；

• 前端路由監(jiān)聽了到 Hash 地址的變化；

• 前端路由把當(dāng)前 Hash 地址對應(yīng)的組件渲染都瀏覽器中；

?結(jié)論?：前端路由，指的是 Hash 地址與組件之間的對應(yīng)關(guān)系！

（5）實現(xiàn)簡易的前端路由

1?? 步驟1：通過 <component> 標(biāo)簽，結(jié)合 comName 動態(tài)渲染組件。示例代碼如下：

2?? 在 App.vue 組件中，為 <a> 鏈接添加對應(yīng)的 hash 值。示例代碼如下：

3?? 在 created 生命周期函數(shù)中，監(jiān)聽瀏覽器地址欄中 hash 地址的變化，動態(tài)切換要展示的組件的名稱。示例代碼如下：

---

二、vue-router 的基本使用

（1）什么是 vue-router

vue-router 是 vue.js 官方給出的路由解決方案。它只能結(jié)合 vue 項目進(jìn)行使用，能夠輕松的管理 SPA 項目中組件的切換。

?vue-router 的官方文檔地址?：https://router.vuejs.org/zh/

（2）vue-router 安裝和配置的步驟

• 安裝 vue-router 包

• 創(chuàng)建路由模塊

• 導(dǎo)入并掛載路由模塊

• 聲明路由鏈接和占位符

2.1 在項目中安裝 vue-router

安裝 vue-router 的命令如下：

npm install vue-router

2.2 創(chuàng)建路由模塊

在 src 源代碼目錄下，新建 router/index.js 路由模塊，并初始化如下的代碼：

2.3 導(dǎo)入并掛載路由模塊

在 src/main.js 入口文件中，導(dǎo)入并掛載路由模塊。示例代碼如下：

2.4 聲明路由鏈接和占位符

在 src/App.vue 組件中，使用 vue-router 提供的 <router-link> 和 <router-view> 聲明路由鏈接和占位符：

（3）聲明路由的匹配規(guī)則

在 src/router/index.js 路由模塊中，通過 routes 數(shù)組聲明路由的匹配規(guī)則。示例代碼如下：

---

三、vue-router 的常見用法

（1）路由重定向

路由重定向指的是：用戶在訪問地址 A 的時候，強(qiáng)制用戶跳轉(zhuǎn)到地址 C ，從而展示特定的組件頁面。通過路由規(guī)則的 redirect 屬性，指定一個新的路由地址，可以很方便地設(shè)置路由的重定向：

（2）嵌套路由

通過路由實現(xiàn)組件的嵌套展示，叫做嵌套路由。

2.1 聲明子路由鏈接和子路由占位符

在 About.vue 組件中，聲明 tab1 和 tab2 的子路由鏈接以及子路由占位符。示例代碼如下：

2.2 通過 children 屬性聲明子路由規(guī)則

在 src/router/index.js 路由模塊中，導(dǎo)入需要的組件，并使用 children 屬性聲明子路由規(guī)則：

（3）動態(tài)路由匹配

3.1 動態(tài)路由的概念

1?? 動態(tài)路由指的是：把 Hash 地址中可變的部分定義為參數(shù)項，從而提高路由規(guī)則的復(fù)用性。
2?? 在 vue-router 中使用英文的冒號（:）來定義路由的參數(shù)項。示例代碼如下：

3.2 $route.params 參數(shù)對象

在動態(tài)路由渲染出來的組件中，可以使用 this.$route.params 對象訪問到動態(tài)匹配的參數(shù)值。

3.3 使用 props 接收路由參數(shù)

為了簡化路由參數(shù)的獲取形式，vue-router 允許在路由規(guī)則中開啟 props 傳參。示例代碼如下：

（4）聲明式導(dǎo)航 & 編程式導(dǎo)航

在瀏覽器中，點擊鏈接實現(xiàn)導(dǎo)航的方式，叫做聲明式導(dǎo)航。例如：

• 普通網(wǎng)頁中點擊 <a> 鏈接、vue 項目中點擊 <router-link> 都屬于聲明式導(dǎo)航；

在瀏覽器中，調(diào)用 API 方法實現(xiàn)導(dǎo)航的方式，叫做編程式導(dǎo)航。例如：

• 普通網(wǎng)頁中調(diào)用 location.href 跳轉(zhuǎn)到新頁面的方式，屬于編程式導(dǎo)航；

（5）vue-router 中的編程式導(dǎo)航 API

vue-router 提供了許多編程式導(dǎo)航的 API，其中最常用的導(dǎo)航 API 分別是：

1. this.$router.push('hash 地址')： 跳轉(zhuǎn)到指定 hash 地址，并增加一條歷史記錄；

2. this.$router.replace('hash 地址')： 跳轉(zhuǎn)到指定的 hash 地址，并替換掉當(dāng)前的歷史記錄；

3. this.$router.go(數(shù)值 n)： 實現(xiàn)導(dǎo)航歷史前進(jìn)、后退；

5.1 $router.push

調(diào)用 this.$router.push() 方法，可以跳轉(zhuǎn)到指定的 hash 地址，從而展示對應(yīng)的組件頁面。示例代碼如下：

5.2 $router.replace

調(diào)用 this.$router.replace() 方法，可以跳轉(zhuǎn)到指定的 hash 地址，從而展示對應(yīng)的組件頁面；

?push 和 replace 的區(qū)別?：

• push 會增加一條歷史記錄；

• replace 不會增加歷史記錄，而是替換掉當(dāng)前的歷史記錄；

5.3 $router.go

調(diào)用 this.$router.go() 方法，可以在瀏覽歷史中前進(jìn)和后退。示例代碼如下：

5.4 $router.go 的簡化用法

在實際開發(fā)中，一般只會前進(jìn)和后退一層頁面。因此 vue-router 提供了如下兩個便捷方法：

1. $router.back()： 在歷史記錄中，后退到上一個頁面

2. $router.forward()： 在歷史記錄中，前進(jìn)到下一個頁面

（6）導(dǎo)航守衛(wèi)

導(dǎo)航守衛(wèi)可以控制路由的訪問權(quán)限。示意圖如下：

6.1 全局前置守衛(wèi)

每次發(fā)生路由的導(dǎo)航跳轉(zhuǎn)時，都會觸發(fā)全局前置守衛(wèi)。因此，在全局前置守衛(wèi)中，程序員可以對每個路由進(jìn)行訪問權(quán)限的控制：

6.2 守衛(wèi)方法的 3 個形參

全局前置守衛(wèi)的回調(diào)函數(shù)中接收 3 個形參，格式為：

6.3 next 函數(shù)的 3 種調(diào)用方式

參考示意圖，分析 next 函數(shù)的 3 種調(diào)用方式最終導(dǎo)致的結(jié)果：

• 當(dāng)前用戶擁有后臺主頁的訪問權(quán)限，直接放行：next()

• 當(dāng)前用戶沒有后臺主頁的訪問權(quán)限，強(qiáng)制其跳轉(zhuǎn)到登錄頁面：next(‘/login’)

• 當(dāng)前用戶沒有后臺主頁的訪問權(quán)限，不允許跳轉(zhuǎn)到后臺主頁：next(false)

6.4 控制后臺主頁的訪問權(quán)限

感謝各位的閱讀，以上就是“Vue中的Router路由是什么”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對Vue中的Router路由是什么這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！

文章標(biāo)題：Vue中的Router路由是什么
本文URL：http://chinadenli.net/article38/gieppp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供虛擬主機(jī)、面包屑導(dǎo)航、網(wǎng)站建設(shè)、品牌網(wǎng)站設(shè)計、商城網(wǎng)站、搜索引擎優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)