---

前言

Vue 路由是 Vue 中一個(gè)非常重要的概念，它允許你在應(yīng)用程序中創(chuàng)建多個(gè)頁(yè)面并在這些頁(yè)面之間進(jìn)行導(dǎo)航。在 Vue 中，路由是通過 Vue Router 實(shí)現(xiàn)的。本文將介紹 Vue Router 的基本概念和用法，并對(duì)路由配置與使用進(jìn)行詳細(xì)解析。

---

一、路由是什么？

路由就是一組映射關(guān)系（key : value）
key 為路徑，value 可能是 function 或者component

1.前端路由

value 是 component 用于展示頁(yè)面內(nèi)容
工作內(nèi)容: 當(dāng)瀏覽器的路徑改變時(shí)，對(duì)應(yīng)的組件就會(huì)顯示

2.后端路由

value 是 function 用于處理客戶端提交的請(qǐng)求
工作過程: 服務(wù)器收到一個(gè)請(qǐng)求時(shí)，根據(jù)請(qǐng)求路徑找到匹配的函數(shù)來(lái)處理請(qǐng)求，返回響應(yīng)珊數(shù)據(jù)

二、路由配置

1.安裝路由

注意：目前安裝路由的默認(rèn)安裝命令安裝的路由是4版本的，只可在 vue3 及以上使用，而 vue2 版本需要安裝路由的3版本才可以使用，因?yàn)槟壳霸趯W(xué)習(xí)Vue2，所以這里安裝路由的3版本

命令如下：

npm i vue-router@3

2.配置路由

第一步：在 main.js 文件中引入并使用插件

第二步：在 src 下創(chuàng)建文件夾 router，并在 router 文件夾下創(chuàng)建 index.js 文件

第三步：在 index.js 文件中寫路由的核心代碼

路由組件一般放入 pages 文件夾中，非路由組件放在 components 文件夾中

第四步：回到 main.js 文件中引入創(chuàng)建好的 router 并在 Vue 實(shí)例中使用

三、路由使用

1.route 與 router

route 是指 單個(gè)路由，用于存放當(dāng)前路徑信息與攜帶的參數(shù)
router 即 路由器，是路由的管理者，里面保存所有的路徑信息，能夠?qū)崿F(xiàn)路由的跳轉(zhuǎn)

2. 聲明式導(dǎo)航

通過 <router-link to="跳轉(zhuǎn)路徑"></ router-link> 標(biāo)簽替代 <a></ a> 標(biāo)簽實(shí)現(xiàn)路由切換

3. 指定組件的呈現(xiàn)位置

通過 <router-view /> 實(shí)現(xiàn)組件呈現(xiàn)

示例：

四、嵌套路由（多級(jí)路由）

第一步：在 index.js 文件中寫出子路由 children 的配置規(guī)則

注意：子路由中的 path 沒有 '/'，因?yàn)?Vue 已經(jīng)默認(rèn)在父路由 '/about' 與 '/home' 后補(bǔ)全了 '/'

第二步：在子組件中寫出跳轉(zhuǎn)多級(jí)路由的完整路徑

示例：

五、路由重定向

1.什么是路由重定向？

當(dāng)用戶在訪問地址 A 的時(shí)候，強(qiáng)制用戶跳轉(zhuǎn)到地址 B ，從而展示特定的組件頁(yè)面

2.設(shè)置 redirect 屬性

通過設(shè)置 redirect 屬性，即可指定一個(gè)新的路由地址

示例：

六、路由規(guī)則

1.用戶點(diǎn)擊

2.路徑改變

3.路由器匹配

4.組件呈現(xiàn)

---

總結(jié)

以上即為對(duì) Vue Router 基本概念和用法，以及路由配置與使用進(jìn)行的相關(guān)介紹，相信大家也都對(duì)路由有了一定的認(rèn)識(shí)。路由是 Vue 中的核心內(nèi)容，任何項(xiàng)目都離不開路由，之后也將會(huì)給大家?guī)?lái)路由傳參及路由守衛(wèi)等相關(guān)內(nèi)容，敬請(qǐng)期待~