Hash模式
vue-router默認(rèn)使用是Hash模式穿撮,Hash模式主要是通過(guò)url中的hash值來(lái)變化的缺脉。Hash(即#)是url的一個(gè)錨點(diǎn),代表的是網(wǎng)頁(yè)中的一個(gè)位置悦穿,當(dāng)hash值變化時(shí)攻礼,瀏覽器就滾動(dòng)到相應(yīng)的位置,所以不會(huì)重新加載頁(yè)面栗柒。在hash值變化的同時(shí)url會(huì)被瀏覽器記錄下來(lái)礁扮,這樣既可以使用瀏覽器的后退了。
總結(jié):Hash模式就是通過(guò)改變url中#后面的值,實(shí)現(xiàn)瀏覽器渲染指定的組件
History模式
這種模式利用了HTML5 History新增的pushState()和replaceState()方法.除了之前的back,forward,go方法,這兩個(gè)新方法可以應(yīng)用在瀏覽器歷史記錄的增加替換功能上.使用History模式,通過(guò)歷史記錄修改url,但它不會(huì)立即向后端發(fā)送請(qǐng)求.注意點(diǎn):雖然History模式可以丟掉不美觀的#,也可以正常的前進(jìn)后退,但是刷新f5后,此時(shí)瀏覽器就會(huì)訪問服務(wù)器,在沒有后臺(tái)支持的情況下,此時(shí)就會(huì)得到一個(gè)404!官方文檔給出的描述是:"不過(guò)這種模式要玩好,還需要后臺(tái)配置支持.因?yàn)槲覀兊膽?yīng)用是單個(gè)客戶端應(yīng)用,如果后臺(tái)沒有正確的配置,當(dāng)用戶直接訪問時(shí),就會(huì)返回404.所以呢,你要在服務(wù)端增加一個(gè)覆蓋所有情況的的候選資源;如果url匹配不到任何靜態(tài)資源,則應(yīng)該返回同一個(gè)index.html頁(yè)面."\
history.pushState():跳轉(zhuǎn)到頁(yè)面太伊,并且有記錄
history.replaceState():跳轉(zhuǎn)頁(yè)面雇锡,沒有記錄
history.go():后退幾步或者前進(jìn)幾步
history.back():移除當(dāng)前頁(yè)面,返回上一個(gè)頁(yè)面history相當(dāng)于一個(gè)棧結(jié)構(gòu)每次pushState就相當(dāng)一次入棧僚焦,每次back就相當(dāng)一次出棧
總結(jié):History模式就是pushState()方法來(lái)對(duì)瀏覽器記錄進(jìn)行修改從而進(jìn)行修改
router,routes,route的意思
1.router:代表路由實(shí)例锰提,如$router?2.routers:指router路由實(shí)例的routes API.用來(lái)配置多個(gè)route路由對(duì)象. 3.route:代表自身組件的路由對(duì)象,如$route
路由守衛(wèi)
to: Route: 即將要進(jìn)入的目標(biāo)路由對(duì)象
from: Route: 當(dāng)前導(dǎo)航正要離開的路由對(duì)象
next: Function: 一定要調(diào)用該方法來(lái)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è)過(guò)的回調(diào)院究。
作者:鯊魚訓(xùn)練師
鏈接:https://juejin.cn/post/6986931172815142943
來(lái)源:稀土掘金
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)本涕,非商業(yè)轉(zhuǎn)載請(qǐng)注明出處业汰。
轉(zhuǎn)載------作者:鯊魚訓(xùn)練師
鏈接:https://juejin.cn/post/6986931172815142943