我們開始就采用了前后端分離的開發(fā)模式鸯乃；話說vue不兼容IE8剖张；不扯太多派阱；總結(jié)一下前端在control層面做的控制诬留；也就是路由的跳轉(zhuǎn)部分；這樣才能再深一步的開發(fā)
了解一下前端路由 在說到登錄攔截的時(shí)候必須要結(jié)合路由使用的
前端路由
1. hash 模式
隨著 ajax 的流行贫母，異步數(shù)據(jù)請(qǐng)求交互運(yùn)行在不刷新瀏覽器的情況下進(jìn)行文兑。而異步交互體驗(yàn)的更高級(jí)版本就是 SPA —— 單頁應(yīng)用。單頁應(yīng)用不僅僅是在頁面交互是無刷新的腺劣，連頁面跳轉(zhuǎn)都是無刷新的绿贞，為了實(shí)現(xiàn)單頁應(yīng)用，所以就有了前端路由橘原。 類似于服務(wù)端路由籍铁，前端路由實(shí)現(xiàn)起來其實(shí)也很簡(jiǎn)單，就是匹配不同的 url 路徑趾断，進(jìn)行解析拒名，然后動(dòng)態(tài)的渲染出區(qū)域 html 內(nèi)容。但是這樣存在一個(gè)問題芋酌，就是 url 每次變化的時(shí)候靡狞，都會(huì)造成頁面的刷新。那解決問題的思路便是在改變 url 的情況下隔嫡，保證頁面的不刷新。在 2014 年之前甘穿，大家是通過 hash 來實(shí)現(xiàn)路由腮恩，url hash 就是類似于：
這種 #。后面 hash 值的變化温兼，并不會(huì)導(dǎo)致瀏覽器向服務(wù)器發(fā)出請(qǐng)求秸滴，瀏覽器不發(fā)出請(qǐng)求，也就不會(huì)刷新頁面募判。另外每次 hash 值的變化荡含，還會(huì)觸發(fā) hashchange 這個(gè)事件咒唆，通過這個(gè)事件我們就可以知道 hash 值發(fā)生了哪些變化。然后我們便可以監(jiān)聽 hashchange 來實(shí)現(xiàn)更新頁面部分內(nèi)容的操作：
function matchAndUpdate () {
// todo 匹配 hash 做 dom 更新操作
}
window.addEventListener('hashchange', matchAndUpdate)
2. history 模式
14年后释液，因?yàn)镠TML5標(biāo)準(zhǔn)發(fā)布全释。多了兩個(gè) API， pushState 和 replaceState 误债，通過這兩個(gè) API 可以改變 url 地址且不會(huì)發(fā)送請(qǐng)求浸船。同時(shí)還有 popstate 事件。通過這些就能用另一種方式來實(shí)現(xiàn)前端路由了寝蹈，但原理都是跟 hash 實(shí)現(xiàn)相同的李命。用了 HTML5 的實(shí)現(xiàn)，單頁路由的 url 就不會(huì)多出一個(gè)#箫老，變得更加美觀封字。但因?yàn)闆]有 # 號(hào)，所以當(dāng)用戶刷新頁面之類的操作時(shí)耍鬓，瀏覽器還是會(huì)給服務(wù)器發(fā)送請(qǐng)求阔籽。為了避免出現(xiàn)這種情況，所以這個(gè)實(shí)現(xiàn)需要服務(wù)器的支持界斜，需要把所有路由都重定向到根頁面仿耽。
function matchAndUpdate () {
// todo 匹配路徑 做 dom 更新操作
}
window.addEventListener('popstate', matchAndUpdate)
vue-router的基礎(chǔ)知識(shí)；
看完上面的內(nèi)容以后各薇；大家也能理解vue-router這個(gè)基本實(shí)現(xiàn)原理就是指定DOM元素的顯示隱藏项贺；通過監(jiān)控url的變化；通過方法展示指定的DOM
下面咱們簡(jiǎn)單的了解一下相關(guān)的知識(shí)內(nèi)容：想要詳細(xì)了解的可以去官方峭判；下面的內(nèi)容也是在官網(wǎng)拿來的开缎；如果不想移步可以繼續(xù)往下看；我寫在這個(gè)里面的就是必須要了解的基礎(chǔ)知識(shí)林螃；
https://router.vuejs.org/zh/ 地址奕删；
接下來咱們簡(jiǎn)單的了解一下vue-router；提供的一下鉤子疗认；
完整的導(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ù)。
全局守衛(wèi)
你可以使用 router.beforeEach 注冊(cè)一個(gè)全局前置守衛(wèi)：
const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
// ...
})
當(dāng)一個(gè)導(dǎo)航觸發(fā)時(shí)刊愚，全局前置守衛(wèi)按照創(chuàng)建順序調(diào)用踊跟。守衛(wèi)是異步解析執(zhí)行，此時(shí)導(dǎo)航在所有守衛(wèi) resolve 完之前一直處于 等待中百拓。
每個(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的toprop 或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
