---

前言

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

---

一、路由是什么？

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

1.前端路由

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

2.后端路由

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

二、路由配置

1.安裝路由

注意：目前安裝路由的默認安裝命令安裝的路由是4版本的，只可在 vue3 及以上使用，而 vue2 版本需要安裝路由的3版本才可以使用，因為目前在學(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 實例中使用

三、路由使用

1.route 與 router

route 是指 單個路由，用于存放當(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)簽實現(xiàn)路由切換

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

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

示例：

四、嵌套路由（多級路由）

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

注意：子路由中的 path 沒有 '/'，因為 Vue 已經(jīng)默認在父路由 '/about' 與 '/home' 后補全了 '/'

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

示例：

五、路由重定向

1.什么是路由重定向？

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

2.設(shè)置 redirect 屬性

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

示例：

六、路由規(guī)則

1.用戶點擊

2.路徑改變

3.路由器匹配

4.組件呈現(xiàn)

---

總結(jié)

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