VUE路由
????????當(dāng)應(yīng)用變得復(fù)雜以后，我們就需要通過一種便捷、高效的方式來管理應(yīng)用，最常見的就是通過路由
????????路由：把?url?與?應(yīng)用中的對應(yīng)的組件進行關(guān)聯(lián)，通過不同的?url?訪問不同的組件
vue-router?的安裝
????????npm?i?vue-router
????????????OR
????????yarn?add?vue-router
Vue.use()
????????通過前面提到的?Vue.use?方法，把?vue-router?安裝到指定的?Vue?實例中
創(chuàng)建路由對象
????????通過?vue-router?提供的?Router?構(gòu)造函數(shù)（類）創(chuàng)建路由對象，路由對象包含了當(dāng)前使用的模式（hash、history）、路由信息
????????（url?與?組件的對應(yīng)關(guān)系）等信息
import?Router?from?'vue-router';
import?Home?from?'./views/Home.vue';
import?Home?from?'./views/About.vue';
const?myRouter?=?new?Router({
??mode:?'history',
??routes:?[
????{
??????path:?'/',
??????component:?Home
????},
????{
??????path:?'/about',
??????component:?About
????}
??]
});
...,
new?Vue({
??...,
??router:?myRouter
});
router-view?組件
????????配置了路由信息以后，我們還需要頁面（組件）中指定路由對應(yīng)的組件出現(xiàn)的位置，當(dāng)當(dāng)前訪問的?url?與某個路由信息匹配的時候，
????????該組件就會出現(xiàn)在?router-view?組件所在的位置
//?App.vue
<template>
??<div?id="app">
????<div?id="nav">
??????<router-link?to="/">Home</router-link>?|
??????<router-link?to="/about">About</router-link>
????</div>
????<hr>
????<router-view/>
??</div>
</template>
路由配置案例：
異步請求
????????在實際的應(yīng)用開發(fā)中，與后端交互，進行異步請求是很常見的需求
axios安裝
? ??????npm?i?axios
請求
跨域
????????vue-cli?提供了一個內(nèi)置基于?node?的?webserver?，我們可以使用它提供的?proxy?服務(wù)來進行跨域請求代理
vue.config.js
????????在項目的根目錄下創(chuàng)建一個?vue.config.js?的文件，通過?`npm?run?serve`?啟動服務(wù)的時候，會讀取該文件
跨域請求代理配置
//?vue.config.js
module.exports?=?{
??devServer:?{
????proxy:?{
??????'/api':?{
????????target:?'http://localhost:7777',
????????pathRewrite:?{
??????????'^/api':?''
????????}
??????}
????}
??}
}
修改配置文件，需要重啟服務(wù)：`npm?run?serve`
//?home.vue
<script>
...
created()?{
??axios({
????url:?'/api/items'
??}).then(res?=>?{
????this.items?=?res.data;
??});
}
...
</script>
動態(tài)路由
????????有的時候，我們需要把滿足某種規(guī)則的路由全部匹配到同一個組件，比如不同的商品的?url
????????我們不可能為每一個商品都定義一個獨立的組件，而是把它們都映射到同一個組件，同時?url?后面的部分為動態(tài)變化的部分，我們會
????????在設(shè)計路由的時候進行特殊的處理
? ? ? ? 其中?`:itemId`?表示匹配的?url?中動態(tài)部分內(nèi)容，如上面的?1,2,3?等，同時該值將被賦值給路由的變量?itemId
路由對象
????????vue-router?會在組件中添加（注入）兩個屬性
????????????????-?$router
????????????????-?$route
$router?對象
????????該對象其實就是?new?VueRouter(...)?得到的路由對象，通過該對象我們可以訪問全局路由信息，調(diào)用路由下的方法，
????????比如：`go`、`back`、`push`?等
$route?對象
????????通過該對象可以訪問與當(dāng)前路由匹配的信息
$route.params
????????獲取動態(tài)路由有關(guān)的信息
queryString（？后面的東西）
????????有的時候，我們可能也會用到?queryString
$route.query
????????我們可以通過路由對象?$route?的?query?屬性來獲取?queryString
編程式導(dǎo)航
????????有的時候，我們可能需要用到編程的方式來導(dǎo)航（跳轉(zhuǎn)），而不是點擊鏈接。如：當(dāng)?`sort`?發(fā)生改變的時候跳轉(zhuǎn)
路由組件的復(fù)用
????????為了提高性能，增強路由組件的復(fù)用，當(dāng)路由切換使用的是同一個組件的時候，則會復(fù)用該路由組件，而不是銷毀重建，這個時候，
????????我們就需要通過?watch?或者?路由相關(guān)的生命周期函數(shù)來處理切換路由導(dǎo)致的變化
watch
????????如果切換的路由復(fù)用了組件，這個時候，我們可以使用?watch?監(jiān)聽?$route
????????????????to?:?改變之后的?$route?對象
? ? ? ? ? ? ? ? from?:?改變之前的?$route?對象
但是我們可以使用?vue-router?提供路由守衛(wèi)（路由有關(guān)的生命周期函數(shù)）來處理路由有關(guān)的業(yè)務(wù)邏輯
路由守衛(wèi)
????????當(dāng)導(dǎo)航發(fā)生改變的時候，vue-router?會在多個不同的地方調(diào)用指定的函數(shù)，也就是與路由有關(guān)的生命周期函數(shù)，也稱為：路由守衛(wèi)
????????????????-?組件內(nèi)守衛(wèi)
????????????????-?路由獨享守衛(wèi)
????????????????-?全局守衛(wèi)
組件內(nèi)守衛(wèi)
????????定義在組件內(nèi)的與路由有關(guān)的生命周期函數(shù)（守衛(wèi)）
????????????????-?beforeRouteEnter
????????????????-?beforeRouteUpdate
????????????????-?beforeRouteLeave
beforeRouteEnter
????????當(dāng)路由解析完成，并中指定的組件渲染之前（組件?`beforeCreate`??之前），這里不能通過?`this`?訪問組件實例，需要通過
?????????`next`?回調(diào)來進行調(diào)用
beforeRouteUpdate
????????在當(dāng)前路由改變，但是該組件被復(fù)用時調(diào)用
beforeRouteLeave
????????導(dǎo)航離開該組件的對應(yīng)路由時調(diào)用
路由守衛(wèi)參數(shù)
to
????????即將要進入的目標?路由對象（$route）
from
????????當(dāng)前導(dǎo)航正要離開的路由對象（$route）
next
????????路由確認回調(diào)函數(shù)，類似?Promise?中的?resolve?函數(shù)，一定要確保調(diào)用?next?函數(shù)，但是后續(xù)的導(dǎo)航行為將依賴?next?方法的調(diào)用參數(shù)
路由獨享的守衛(wèi)
????????可以在路由配置上直接定義?`beforeEnter`?守衛(wèi)，相對來說，應(yīng)用不多
router/index.js
全局守衛(wèi)
????????全局守衛(wèi)是注冊在?router?對象（new?VueRouter({...})）上的
????????????????-?beforeEach
????????????????-?beforeResolve
????????????????-?afterEach
beforeEach
? ? ? ? 注冊在路由對象上，當(dāng)一個導(dǎo)航觸發(fā)時，全局前置守衛(wèi)按照創(chuàng)建順序調(diào)用
beforeResolve
????????在所有組件內(nèi)守衛(wèi)和異步路由組件被解析之后被調(diào)用
afterEach
????????導(dǎo)航被確認后調(diào)用
????????因為導(dǎo)航已經(jīng)被確認，所以沒有?`next`
嵌套路由
????????一些比較復(fù)雜的應(yīng)用會有多層嵌套的路由和組件組成
????????在應(yīng)用增加一個用戶個人中心，用戶中心又是由多個頁面組成，如：
添加路由與子路由
children?屬性
????????一個路由中的?`children`?表示嵌套的子路由
子路由視圖
????????有了子路由以后，還需要在視圖組件中設(shè)置?`router-view`?
重定向redirect
????????有的時候，我們會根據(jù)某種需求對用戶請求的頁面進行重新定位
案例
????????現(xiàn)有一小說網(wǎng)站，提供了?男生頻道?和?女生頻道?的兩個入口，用戶首次進入頁面的時候，會出現(xiàn)選擇，并記住用戶的選擇，以后
????????該用戶進入網(wǎng)站直接根據(jù)記錄的選擇進入對應(yīng)的頻道
組件
路由配置
redirect
別名alias
????????重定向，是從一個路由切換到另外一個路由，而別名是不同的路由顯示同一個頁面，比如：`/user`?是用戶中心的路由，`/member`?，
????????我們也可以給這個頁面定義另外一個路由，雖然在某些時候，重定向與別名有類似的效果，但是，別名不存在跳轉(zhuǎn)，瀏覽器地址欄上
????????顯示的?URL?并不會切換
404
