Vue中的Router路由是什么

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

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

（1）什么是路由

路由（英文：router）就是對應關系。

（2）SPA 與前端路由

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

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

（3）什么是前端路由

通俗易懂的概念：Hash 地址與組件之間的對應關系。

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

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

• 導致了 URL 地址欄中的 Hash 值發生了變化；

• 前端路由監聽了到 Hash 地址的變化；

• 前端路由把當前 Hash 地址對應的組件渲染都瀏覽器中；

?結論?：前端路由，指的是 Hash 地址與組件之間的對應關系！

（5）實現簡易的前端路由

1?? 步驟1：通過 <component> 標簽，結合 comName 動態渲染組件。示例代碼如下：

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

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

二、vue-router 的基本使用

（1）什么是 vue-router

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

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

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

• 安裝 vue-router 包

• 創建路由模塊

• 導入并掛載路由模塊

• 聲明路由鏈接和占位符

2.1 在項目中安裝 vue-router

安裝 vue-router 的命令如下：

npm install vue-router

2.2 創建路由模塊

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

2.3 導入并掛載路由模塊

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

2.4 聲明路由鏈接和占位符

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

（3）聲明路由的匹配規則

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

三、vue-router 的常見用法

（1）路由重定向

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

（2）嵌套路由

通過路由實現組件的嵌套展示，叫做嵌套路由。

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

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

2.2 通過 children 屬性聲明子路由規則

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

（3）動態路由匹配

3.1 動態路由的概念

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

3.2 $route.params 參數對象

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

3.3 使用 props 接收路由參數

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

（4）聲明式導航 & 編程式導航

在瀏覽器中，點擊鏈接實現導航的方式，叫做聲明式導航。例如：

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

在瀏覽器中，調用 API 方法實現導航的方式，叫做編程式導航。例如：

• 普通網頁中調用 location.href 跳轉到新頁面的方式，屬于編程式導航；

（5）vue-router 中的編程式導航 API

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

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

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

3. this.$router.go(數值 n)： 實現導航歷史前進、后退；

5.1 $router.push

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

5.2 $router.replace

調用 this.$router.replace() 方法，可以跳轉到指定的 hash 地址，從而展示對應的組件頁面；

?push 和 replace 的區別?：

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

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

5.3 $router.go

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

5.4 $router.go 的簡化用法

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

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

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

（6）導航守衛

導航守衛可以控制路由的訪問權限。示意圖如下：

6.1 全局前置守衛

每次發生路由的導航跳轉時，都會觸發全局前置守衛。因此，在全局前置守衛中，程序員可以對每個路由進行訪問權限的控制：

6.2 守衛方法的 3 個形參

全局前置守衛的回調函數中接收 3 個形參，格式為：

6.3 next 函數的 3 種調用方式

參考示意圖，分析 next 函數的 3 種調用方式最終導致的結果：

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

• 當前用戶沒有后臺主頁的訪問權限，強制其跳轉到登錄頁面：next(‘/login’)

• 當前用戶沒有后臺主頁的訪問權限，不允許跳轉到后臺主頁：next(false)

6.4 控制后臺主頁的訪問權限

感謝各位的閱讀，以上就是“Vue中的Router路由是什么”的內容了，經過本文的學習后，相信大家對Vue中的Router路由是什么這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！