學(xué)習(xí)目的
? ? 學(xué)習(xí)Vue的必備技能，必須 熟練使用 Vue-router，能夠在實(shí)際項(xiàng)目中運(yùn)用。
Vue-router介紹
? ??Vue Router 是 Vue.js?官方的路由管理器。它和 Vue.js 的核心深度集成，讓構(gòu)建單頁面應(yīng)用變得易如反掌。包含的功能有：嵌套的路由/視圖表；模塊化的、基于組件的路由配置；路由參數(shù)、查詢、通配符；基于 Vue.js 過渡系統(tǒng)的視圖過渡效果；細(xì)粒度的導(dǎo)航控制；帶有自動(dòng)激活的 CSS class 的鏈接；HTML5 歷史模式或 hash 模式，在 IE9 中自動(dòng)降級(jí)；自定義的滾動(dòng)條行為。
? ? ? ? 由 前端 來控制頁面的跳轉(zhuǎn)（但其實(shí)是個(gè)單頁面），根據(jù)不同的?url?地址展示不同的內(nèi)容和頁面。
? ? ? ? 優(yōu)點(diǎn)：體驗(yàn)好，不需要每次從服務(wù)器獲取全部，快速展現(xiàn)給用戶；
? ? ? ? 缺點(diǎn)：不利于SEO；使用瀏覽器的前進(jìn)，后退鍵的時(shí)候會(huì)重新發(fā)送請(qǐng)求，沒有合理的利用緩存；單頁面無法記住之前滾動(dòng)的位置，無法在前進(jìn)和后退的時(shí)候記住滾動(dòng)的位置。
Vue-router安裝
? ? ? ? 安裝? npm install vue-router??--save-dev?
? ? ? ? src 目錄下 新建 router 目錄，目錄下新建 index.js
? ? ? ? 在 main.js中引入
? ?Vue-router 核心
? ? ? ? ? ? ? 路由跳轉(zhuǎn)的方式
? ? ? ? ? ? ? ? ? ? <router-link to=' '></router-link>? ? 和? ?this.$router.push({path:' '})
????????動(dòng)態(tài)路由匹配
? ? ? ? ? ? ? ? 動(dòng)態(tài)路由路徑參數(shù)，以冒號(hào)開頭，如上圖的 ↑↑↑↑↑↑↑↑↑↑↑↑↑↑
? ? ? ? ? ? ? ? 獲取路由的參數(shù)
? ? ? ? ? ? ? ? 當(dāng)在路由中設(shè)置了 props:true 的時(shí)候
? ? ????????官方文檔中的說明
? ??????????響應(yīng)路由參數(shù)的變化
? ? ? ? ? ? ? ? ? ? 當(dāng)路由參數(shù)發(fā)生變化時(shí)，比如helloworld/123 導(dǎo)航到 helloworld/456，原來的組件實(shí)例會(huì)被復(fù)用。因?yàn)閮蓚€(gè)路由都渲染同個(gè)組件，比起銷毀再創(chuàng)建，復(fù)用則顯得更加高效。不過，這也意味著組件的生命周期鉤子不會(huì)再被調(diào)用。
? ??????????????????復(fù)用組件時(shí)，想對(duì)路由參數(shù)的變化作出響應(yīng)的話，可以用以下兩種方式
? ? ? ? ? ? ? ? 比如 mounted ,created 不會(huì)再被調(diào)用? ， 以上 兩種方式 監(jiān)聽參數(shù)變化，作出相應(yīng)的業(yè)務(wù)邏輯處理。
? ? ? 嵌套路由
? ??????????????當(dāng)你訪問?/layout 時(shí)，layout?的 router-view 是不會(huì)渲染任何東西，這是因?yàn)闆]有匹配到合適的子路由。如果你想要渲染點(diǎn)什么，可以提供一個(gè) 空的 子路由（可以理解為默認(rèn)輸出）：
? ????編程式的導(dǎo)航
? ? ? ? ????除了使用??創(chuàng)建 a 標(biāo)簽來定義導(dǎo)航鏈接，我們還可以借助 router 的實(shí)例方法，通過編寫代碼來實(shí)現(xiàn)：?this.$router.push({path:' '})
? ? ? ? ? ? 文檔示例：
router.push('home')? ；// 字符串
router.push({path:'home'})；??// 對(duì)象
router.push({name:'user',params:{userId:123}})；??// 命名的路由
router.push({path:'register',query:{plan:'private'}})；// 帶查詢參數(shù)，變成 /register?plan=private ，獲取this.$route.query.plan
注意：如果提供了?path，params?會(huì)被忽略，上述例子中的?query?并不屬于這種情況。取而代之的是下面例子的做法，你需要提供路由的?name?或手寫完整的帶有參數(shù)的?path：
const userId = 123
router.push({ name: 'user', params: { userId }})；? ? // -> /user/123
router.push({ path: `/user/${userId}` }) ；? ? ?// -> /user/123
// 這里的 params 不生效（注意這個(gè)例子）
router.push({ path: '/user', params: { userId }}) ；? ?// -> /user
? ? ??同樣的規(guī)則也適用于?router-link?組件的?to?屬性。
? ??????router.go(n)??這個(gè)方法的參數(shù)是一個(gè)整數(shù)，意思是在 history 記錄中向前或者后退多少步，類似?window.history.go(n)。
????????router.go(1) ；?// 在瀏覽器記錄中前進(jìn)一步，等同于 history.forward( )
????????router.go(-1)； // 后退一步記錄，等同于 history.back( )
????????router.go(3)；??// 前進(jìn) 3 步記錄
? ??命名路由 和 命名視圖
? ??????????????命名路由?
? ??????這跟代碼調(diào)用?router.push()?是一樣的：
? ?????? this.$router.push({ name:'Helloworld',params:{id:123}});
? ??????????????命名視圖
? ??????????????有時(shí)候想同時(shí) (同級(jí)) 展示多個(gè)視圖，而不是嵌套展示，例如創(chuàng)建一個(gè)布局，有?sidebar?(側(cè)導(dǎo)航) 和?main?(主內(nèi)容) 兩個(gè)視圖，這個(gè)時(shí)候命名視圖就派上用場(chǎng)了。你可以在界面中擁有多個(gè)單獨(dú)命名的視圖，而不是只有一個(gè)單獨(dú)的出口。如果?router-view?沒有設(shè)置名字，那么默認(rèn)為?default。
? ? ? ? ? ? ? ? ? ? ? ? 文檔示例
? ? ??? ? ? ? ? ? 嵌套命名視圖
? ??????????重定向 和 別名
? ? ? ? ? ? ? ? 重定向
? ? ? ? ? ? ? ? ? ? 重定向 通過?routes?配置來完成
? ? ? ? ? ? ? ? ? ? 別名 （文檔示例）
? ??????????????/a?的別名是?/b，意味著，當(dāng)用戶訪問?/b?時(shí)，URL 會(huì)保持為?/b，但是路由匹配則為?/a，就像用戶訪問?/a?一樣
const router = new VueRouter({
????????????????routes: [
????????????????????{ path: '/a', component: A, alias: '/b' }
????????????????]})
? ??????????導(dǎo)航守衛(wèi)
? ??????????“導(dǎo)航”表示 路由正在發(fā)生改變。? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??????????????vue-router?提供的導(dǎo)航守衛(wèi)主要用來通過跳轉(zhuǎn)或取消的方式守衛(wèi)導(dǎo)航。有多種機(jī)會(huì)植入路由導(dǎo)航過程中：全局的, 單個(gè)路由獨(dú)享的, 或者組件級(jí)的。
? ? ? ? ? ? ? 記住參數(shù)或查詢的改變并不會(huì)觸發(fā)進(jìn)入/離開的導(dǎo)航守衛(wèi)。你可以通過觀察?$route?對(duì)象來應(yīng)對(duì)這些變化，或使用?beforeRouteUpdate?的組件內(nèi)守衛(wèi)。
? ? ? ? ? ? ? ? ? ? 個(gè)人的理解，導(dǎo)航守衛(wèi)有點(diǎn)類似 中間件，進(jìn)入 路由 前 先通過守衛(wèi)，來判斷是否可以通過，進(jìn)而到達(dá)頁面。
? ?????????????全局守衛(wèi) （在定義router的 地方定義）
? ??????????????????全局前置守衛(wèi)?router.beforeEach
? ??????????????????????每個(gè)守衛(wèi)方法接收三個(gè)參數(shù)：
? ??????????????????????to: Route: 即將要進(jìn)入的目標(biāo)?路由對(duì)象
? ??????????????????????from: Route: 當(dāng)前導(dǎo)航正要離開的路由
? ??????????????????????next: Function: 一定要調(diào)用該方法來?resolve?這個(gè)鉤子。執(zhí)行效果依賴?next?方法的調(diào)用參數(shù)。
? ??????????????????????next(): 進(jìn)行管道中的下一個(gè)鉤子。如果全部鉤子執(zhí)行完了，則導(dǎo)航的狀態(tài)就是?confirmed?(確認(rèn)的)。
? ??????????????????????next(false): 中斷當(dāng)前的導(dǎo)航。如果瀏覽器的 URL 改變了 (可能是用戶手動(dòng)或者瀏覽器后退按鈕)，那么 URL 地址會(huì)重置到?from?路由對(duì)應(yīng)的地址。
? ??????????????????????next('/')?或者?next({ path: '/' }): 跳轉(zhuǎn)到一個(gè)不同的地址。當(dāng)前的導(dǎo)航被中斷，然后進(jìn)行一個(gè)新的導(dǎo)航。你可以向?next?傳遞任意位置對(duì)象，且允許設(shè)置諸如?replace: true、name: 'home'?之類的選項(xiàng)以及任何用在?router-link?的?to?prop?或?router.push?中的選項(xiàng)。
? ??????????????????????next(error): (2.4.0+) 如果傳入?next?的參數(shù)是一個(gè)?Error?實(shí)例，則導(dǎo)航會(huì)被終止且該錯(cuò)誤會(huì)被傳遞給?router.onError()?注冊(cè)過的回調(diào)。
? ??????????????????????確保要調(diào)用?next?方法，否則鉤子就不會(huì)被 resolved。
? ??????????????????全局解析守衛(wèi)???router.beforeResolve
? ? ? ? ? ? ? ? ? ? ????跟?全局前置守衛(wèi) 一樣，接收三個(gè)參數(shù)
? ??????????????????????這和?router.beforeEach?類似，區(qū)別是在導(dǎo)航被確認(rèn)之前，同時(shí)在所有組件內(nèi)守衛(wèi)和異步路由組件被解析之后，解析守衛(wèi)就被調(diào)用。
????????????????????????確保要調(diào)用?next?方法
? ??????????????????全局后置鉤子?? router.afterEach
? ??????????????????????不會(huì)接受?next?函數(shù)也不會(huì)改變導(dǎo)航本身
? ? ? ? ? ? 路由獨(dú)享的守衛(wèi)（在路由內(nèi)定義）
? ??????????????????這些守衛(wèi)與全局前置守衛(wèi)的方法參數(shù)是一樣的。
? ??????????組件內(nèi)的守衛(wèi)（在組件內(nèi)定義）
? ? ? ? ? ? ? ? ? ? ?beforeRouteEnter?守衛(wèi)?不能?訪問?this，因?yàn)槭匦l(wèi)在導(dǎo)航確認(rèn)前被調(diào)用,因此即將登場(chǎng)的新組件還沒被創(chuàng)建。不過，你可以通過傳一個(gè)回調(diào)給?next來訪問組件實(shí)例。在導(dǎo)航被確認(rèn)的時(shí)候執(zhí)行回調(diào)，并且把組件實(shí)例作為回調(diào)方法的參數(shù)。
? ??????????????????beforeRouteEnter(to,from,next){
????????????????????????next( vm => {
????????????????????????????// 通過 `vm` 訪問組件實(shí)例
????????????????????})}
? ??????????????????注意?beforeRouteEnter?是支持給?next?傳遞回調(diào)的唯一守衛(wèi)。對(duì)于?beforeRouteUpdate?和?beforeRouteLeave?來說，this?已經(jīng)可用了，所以不支持傳遞回調(diào)，因?yàn)闆]有必要了。
? ??????????????????beforeRouteUpdate(to,from,next){
????????????????????????// just use `this`
????????????????????????this.name = to.params.name；
????????????????????????next()；
????????????????????}
? ??????????????????這個(gè)離開守衛(wèi)通常用來?禁止用戶在還未保存修改前突然離開?。該導(dǎo)航可以通過?next(false)?來取消。
? ??????????????????beforeRouteLeave(to,from,next){
????????????????????????const answer = window.confirm('Do you really want to leave? you have ????????????????????????????????????unsaved changes!')；
????????????????????????if(answer){
????????????????????????????????next()；
????????????????????????????}else{
????????????????????????????????next(false)；
????????????????????????????}}
??????????????完整的導(dǎo)航解析流程
????????導(dǎo)航被觸發(fā)。
????????在失活的組件里調(diào)用離開守衛(wèi)。
????????調(diào)用全局的?beforeEach?守衛(wèi)。
????????在重用的組件里調(diào)用?beforeRouteUpdate?守衛(wèi) (2.2+)。
????????在路由配置里調(diào)用?beforeEnter。
????????解析異步路由組件。
????????在被激活的組件里調(diào)用?beforeRouteEnter。
????????調(diào)用全局的?beforeResolve?守衛(wèi) (2.5+)。
????????導(dǎo)航被確認(rèn)。
????????調(diào)用全局的?afterEach?鉤子。
????????觸發(fā) DOM 更新。
????????用創(chuàng)建好的實(shí)例調(diào)用?beforeRouteEnter?守衛(wèi)中傳給?next?的回調(diào)函數(shù)。
?????????過渡動(dòng)效
? ? ? ? ? ? ? ? ?<router-view>是基本的動(dòng)態(tài)組件，所以我們可以用 <transition>組件給它添加一些過渡效果：
? ??????????????????fade-enter:進(jìn)入過渡的開始狀態(tài)，元素被插入時(shí)生效，只應(yīng)用一幀后立刻刪除。
????????????????????fade-enter-active:進(jìn)入過渡的結(jié)束狀態(tài)，元素被插入時(shí)就生效，在過渡過程完成后移除。
????????????????????fade-leave:離開過渡的開始狀態(tài)，元素被刪除時(shí)觸發(fā)，只應(yīng)用一幀后立刻刪除。
????????????????????fade-leave-active:離開過渡的結(jié)束狀態(tài)，元素被刪除時(shí)生效，離開過渡完成后被刪除。
? ? ? ? ? ? ? ? ? ? 數(shù)據(jù)獲?。ㄒ韵聻?文檔示例 ）
? ? ? ? ? ? ? ? ? ? 有時(shí)候，進(jìn)入某個(gè)路由后，需要從服務(wù)器獲取數(shù)據(jù)。例如，在渲染用戶信息時(shí)，你需要從服務(wù)器獲取用戶的數(shù)據(jù)。我們可以通過兩種方式來實(shí)現(xiàn)：
? ??????????????????導(dǎo)航完成之后獲取：先完成導(dǎo)航，然后在接下來的組件生命周期鉤子中獲取數(shù)據(jù)。在數(shù)據(jù)獲取期間顯示“加載中”之類的指示。
? ??????????????????導(dǎo)航完成之前獲取：導(dǎo)航完成前，在路由進(jìn)入的守衛(wèi)中獲取數(shù)據(jù)，在數(shù)據(jù)獲取成功后執(zhí)行導(dǎo)航。
????????????????????從技術(shù)角度講，兩種方式都不錯(cuò) —— 就看你想要的用戶體驗(yàn)是哪種。
? ??????????????????????導(dǎo)航完成后獲取數(shù)據(jù)
? ??????????????????當(dāng)你使用這種方式時(shí)，我們會(huì)馬上導(dǎo)航和渲染組件，然后在組件的?created?鉤子中獲取數(shù)據(jù)。這讓我們有機(jī)會(huì)在數(shù)據(jù)獲取期間展示一個(gè) loading 狀態(tài)，還可以在不同視圖間展示不同的 loading 狀態(tài)。
假設(shè)我們有一個(gè)?Post?組件，需要基于?$route.params.id?獲取文章數(shù)據(jù)：
? ??????????????????????????在導(dǎo)航完成前獲取數(shù)據(jù)
????????????????????通過這種方式，我們?cè)趯?dǎo)航轉(zhuǎn)入新的路由前獲取數(shù)據(jù)。我們可以在接下來的組件的?beforeRouteEnter守衛(wèi)中獲取數(shù)據(jù)，當(dāng)數(shù)據(jù)獲取成功后只調(diào)用?next?方法。
