vue路由

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的toproprouter.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

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市菩颖,隨后出現(xiàn)的幾起案子样漆,更是在濱河造成了極大的恐慌,老刑警劉巖晦闰,帶你破解...
    沈念sama閱讀 211,290評(píng)論 6 491
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件放祟,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡呻右,警方通過(guò)查閱死者的電腦和手機(jī)跪妥,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,107評(píng)論 2 385
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)窿冯,“玉大人骗奖,你說(shuō)我怎么就攤上這事。” “怎么了执桌?”我有些...
    開封第一講書人閱讀 156,872評(píng)論 0 347
  • 文/不壞的土叔 我叫張陵鄙皇,是天一觀的道長(zhǎng)。 經(jīng)常有香客問我仰挣,道長(zhǎng)伴逸,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,415評(píng)論 1 283
  • 正文 為了忘掉前任膘壶,我火速辦了婚禮错蝴,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘颓芭。我一直安慰自己顷锰,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,453評(píng)論 6 385
  • 文/花漫 我一把揭開白布亡问。 她就那樣靜靜地躺著官紫,像睡著了一般。 火紅的嫁衣襯著肌膚如雪州藕。 梳的紋絲不亂的頭發(fā)上束世,一...
    開封第一講書人閱讀 49,784評(píng)論 1 290
  • 那天,我揣著相機(jī)與錄音床玻,去河邊找鬼毁涉。 笑死,一個(gè)胖子當(dāng)著我的面吹牛锈死,可吹牛的內(nèi)容都是我干的贫堰。 我是一名探鬼主播,決...
    沈念sama閱讀 38,927評(píng)論 3 406
  • 文/蒼蘭香墨 我猛地睜開眼馅精,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼严嗜!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起洲敢,我...
    開封第一講書人閱讀 37,691評(píng)論 0 266
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤漫玄,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后压彭,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體睦优,經(jīng)...
    沈念sama閱讀 44,137評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,472評(píng)論 2 326
  • 正文 我和宋清朗相戀三年壮不,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了汗盘。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,622評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡询一,死狀恐怖隐孽,靈堂內(nèi)的尸體忽然破棺而出癌椿,到底是詐尸還是另有隱情,我是刑警寧澤菱阵,帶...
    沈念sama閱讀 34,289評(píng)論 4 329
  • 正文 年R本政府宣布踢俄,位于F島的核電站,受9級(jí)特大地震影響晴及,放射性物質(zhì)發(fā)生泄漏都办。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,887評(píng)論 3 312
  • 文/蒙蒙 一虑稼、第九天 我趴在偏房一處隱蔽的房頂上張望琳钉。 院中可真熱鬧,春花似錦蛛倦、人聲如沸歌懒。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,741評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)歼培。三九已至震蒋,卻和暖如春茸塞,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背查剖。 一陣腳步聲響...
    開封第一講書人閱讀 31,977評(píng)論 1 265
  • 我被黑心中介騙來(lái)泰國(guó)打工钾虐, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人笋庄。 一個(gè)月前我還...
    沈念sama閱讀 46,316評(píng)論 2 360
  • 正文 我出身青樓效扫,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親直砂。 傳聞我的和親對(duì)象是個(gè)殘疾皇子菌仁,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,490評(píng)論 2 348

推薦閱讀更多精彩內(nèi)容

  • 1.mvvm 框架是什么? 定義:M:Model(服務(wù)器上的業(yè)務(wù)邏輯操作) V:View(頁(yè)面)VM:ViewMo...
    走的是前方的路_端的是生活的苦閱讀 14,402評(píng)論 0 3
  • 參考文章鏈接https://segmentfault.com/a/1190000011519350https://...
    陳成熟閱讀 198評(píng)論 0 0
  • 這里說(shuō)的Vue中的路由是指前端路由静暂,與后端路由有所區(qū)別济丘。我們可以使用url來(lái)獲取服務(wù)器的資源,而這種url與資源的...
    一顆腦袋閱讀 588評(píng)論 0 0
  • 前言:現(xiàn)在 Vue 的路由已經(jīng)開始大規(guī)模應(yīng)用在單頁(yè)面應(yīng)用上了洽蛀。比較常見的就是路由網(wǎng)址中的 URL 里面的hash(...
    CondorHero閱讀 578評(píng)論 0 1
  • 路由 注入實(shí)例 此后可以在任何組件內(nèi)通過(guò) this.$router 訪問路由器(或通過(guò)import導(dǎo)入router...
    李霖弢閱讀 406評(píng)論 0 0