路由的概念：

路由就是Hash地址與組件之間對(duì)應(yīng)關(guān)系罗洗。

SPA指的是一個(gè)web網(wǎng)站只有一個(gè)唯一的一個(gè)HTML頁(yè)面趴泌，所有組件的展示與切換都在這唯一的一個(gè)頁(yè)面內(nèi)完成，此時(shí)，不同組件之間的切換需要通過(guò)前端路由來(lái)實(shí)現(xiàn)。也就是說(shuō)拄丰，在SPA項(xiàng)目中府树，不同功能之間的切換，要依賴于前端路由來(lái)完成料按。

路由的工作原理:

①用戶點(diǎn)擊了頁(yè)面上的路由鏈接

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

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

④前端路由把當(dāng)前Hash地址對(duì)應(yīng)的組件 渲染到瀏覽器中奄侠。

實(shí)現(xiàn)簡(jiǎn)易的前端路由：

①通過(guò)<component>標(biāo)簽，結(jié)合comName（這是一個(gè)代表組件名稱的動(dòng)態(tài)變量）動(dòng)態(tài)渲染組件

實(shí)現(xiàn)簡(jiǎn)單路由

②在APP.vue組件中载矿，為<a>鏈接添加對(duì)應(yīng)的hash值（注意要加' #/ '）

鏈接寫法

③在created生命周期函數(shù)中垄潮，監(jiān)聽瀏覽器地址中hash地址的變化，動(dòng)態(tài)切換要展示的組件的名稱

window中有onhashchange屬性闷盔，location有hash屬性弯洗，指的是地址欄當(dāng)前的hash值，當(dāng)window的hash地址變化時(shí)馁筐，如果地址是‘#/home’,那么就代表點(diǎn)擊了對(duì)應(yīng)的鏈接，并且此時(shí)要修改相應(yīng)的comName的值為對(duì)應(yīng)組件的名稱

函數(shù)編寫

什么是vue-router

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

v-router的安裝和配置步驟

① 安裝 vue-router 包? ( npm i vue-router@3.5.2 -S )

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

在src源目錄下炎码，新建router/index.js路由模塊盟迟，并初始化代碼

初始化路由代碼

③ 導(dǎo)入并掛載路由模塊（在main.js中）

導(dǎo)入路由模塊，然后在實(shí)例對(duì)象中添加? router：router 進(jìn)行掛載

掛載路由模塊

④ 聲明路由鏈接和占位符

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

聲明和占位

⑤聲明路由的匹配規(guī)則：在 src/router/index.js 路由模塊中攒菠，通過(guò) routes 數(shù)組聲明路由的匹配規(guī)則

路由的匹配規(guī)則

路由重定向

路由重定向指的是：用戶在訪問(wèn)地址 A 的時(shí)候，強(qiáng)制用戶跳轉(zhuǎn)到地址 C 歉闰，從而展示特定的組件頁(yè)面辖众。

通過(guò)路由規(guī)則的 redirect 屬性，指定一個(gè)新的路由地址和敬，可以很方便地設(shè)置路由的重定向：

redirect路由重定向

嵌套路由

①在 About.vue 組件中凹炸，聲明 tab1 和 tab2 的子路由鏈接以及子路由占位符。

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

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

默認(rèn)子路由的兩種寫法

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

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

動(dòng)態(tài)路由指的是：把 Hash 地址中可變的部分定義為參數(shù)項(xiàng)，從而提高路由規(guī)則的復(fù)用性舱痘。在 vue-router 中使用英文的冒號(hào)（:）來(lái)定義路由的參數(shù)項(xiàng)变骡。

用 ：聲明動(dòng)態(tài)參數(shù)項(xiàng)

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

在動(dòng)態(tài)路由渲染出來(lái)的組件中，可以使用 this.$route.params 對(duì)象訪問(wèn)到動(dòng)態(tài)匹配的參數(shù)值芭逝。

參數(shù)對(duì)象訪問(wèn)參數(shù)值

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

為了簡(jiǎn)化路由參數(shù)的獲取形式塌碌，vue-router 允許在路由規(guī)則中開啟props傳參

props傳參

id的值是通過(guò)遍歷時(shí)每一項(xiàng)的id所得

id值的來(lái)源

編程式導(dǎo)航

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

① this.$router.push('hash 地址')

跳轉(zhuǎn)到指定 hash 地址旬盯，并增加一條歷史記錄

② this.$router.replace('hash 地址')

跳轉(zhuǎn)到指定的 hash 地址誊爹，并替換掉當(dāng)前的歷史記錄

③ this.$router.go(數(shù)值 n)

實(shí)現(xiàn)導(dǎo)航歷史前進(jìn)蹬刷、后退

$router.go 的簡(jiǎn)化用法：

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

① $router.back()

在歷史記錄中办成，后退到上一個(gè)頁(yè)面

② $router.forward()

在歷史記錄中，前進(jìn)到下一個(gè)頁(yè)面

路由懶加載

問(wèn)題: 首頁(yè)加載時(shí), app.js體積過(guò)大, 可能會(huì)造成首頁(yè)加載變慢

原因: webpack會(huì)構(gòu)建引用關(guān)系地圖(上來(lái)就把其他路由頁(yè)面都import了進(jìn)來(lái)), app.js里

優(yōu)化: 使用路由懶加載(路由匹配時(shí), 再去加載對(duì)應(yīng)的組件代碼), 其他的路由vue文件, 單獨(dú)打包進(jìn)自己的js文件中

效果: 首頁(yè)只加載首頁(yè)的js代碼, 其他頁(yè)面等待路由切換, 再加載執(zhí)行對(duì)應(yīng)自己的js

方法一：在導(dǎo)入時(shí)就給變量單獨(dú)賦值import,之后的配置中使用變量搂漠，也就是讀到這個(gè)路由才會(huì)進(jìn)行導(dǎo)入操作

實(shí)現(xiàn)方法1

方法二：不賦值給變量迂卢，直接將import在路由配置中使用

實(shí)現(xiàn)方法2