路由編程式導航(學習筆記)

想要導航到不同的 URL趾牧,則使用 router.push 方法故黑。
這個方法會向 history 棧添加一個新的記錄,所以遣臼,當用戶點擊瀏覽器后退按鈕時性置,則回到之前的 URL。

聲明式 編程式
<router-link :to="..."> router.push(...)

// 字符串
router.push('home')

// 對象
router.push({ path: 'home' })

// 命名的路由
router.push({ name: 'user', params: { userId: 123 }})

// 帶查詢參數(shù)揍堰,變成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

router.replace(location)

跟 router.push 很像鹏浅,唯一的不同就是,它不會向 history 添加新記錄个榕,而是跟它的方法名一樣 —— 替換掉當前的 history 記錄篡石。

router.go這個方法的參數(shù)是一個整數(shù),意思是在 history 記錄中向前或者后退多少步西采,類似 window.history.go(n)凰萨。

// 在瀏覽器記錄中前進一步,等同于 history.forward()
router.go(1)

// 后退一步記錄械馆,等同于 history.back()
router.go(-1)

// 前進 3 步記錄
router.go(3)

// 如果 history 記錄不夠用胖眷,那就默默地失敗唄
router.go(-100)
router.go(100)

一個視圖使用一個組件渲染,因此對于同個路由霹崎,多個視圖就需要多個組件

每個鉤子方法接收三個參數(shù):
當一個導航觸發(fā)時珊搀,全局的 before 鉤子按照創(chuàng)建順序調(diào)用。鉤子是異步解析執(zhí)行尾菇,此時導航在所有鉤子 resolve 完之前一直處于等待中境析。
to: Route: 即將要進入的目標 路由對象
from: Route: 當前導航正要離開的路由
next: Function: 一定要調(diào)用該方法來 resolve 這個鉤子。執(zhí)行效果依賴 next 方法的調(diào)用參數(shù)派诬。
next(): 進行管道中的下一個鉤子劳淆。如果全部鉤子執(zhí)行完了,則導航的狀態(tài)就是 confirmed (確認的)默赂。
next(false): 中斷當前的導航沛鸵。如果瀏覽器的 URL 改變了(可能是用戶手動或者瀏覽器后退按鈕),那么 URL 地址會重置到 from 路由對應(yīng)的地址缆八。
next('/') 或者 next({ path: '/' }): 跳轉(zhuǎn)到一個不同的地址曲掰。當前的導航被中斷疾捍,然后進行一個新的導航。
確保要調(diào)用 next 方法栏妖,否則鉤子就不會被 resolved乱豆。

同樣可以注冊一個全局的 after 鉤子,不過它不像 before 鉤子那樣底哥,after 鉤子沒有 next 方法咙鞍,不能改變導航:

for (var i = 0; i < bankcard.length; i++) {
  if (i <= 4) {
    bankcard = bankcard.slice(0, 5)
  } else if (i > 5) {
      bankcard = bankcard.slice(0, 5)
      bankcards = bankcard.slice(5)
  }
  bankcard = bankcard.concat(bankcards)
}

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市趾徽,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌翰守,老刑警劉巖孵奶,帶你破解...
    沈念sama閱讀 212,599評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異蜡峰,居然都是意外死亡了袁,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,629評論 3 385
  • 文/潘曉璐 我一進店門湿颅,熙熙樓的掌柜王于貴愁眉苦臉地迎上來载绿,“玉大人,你說我怎么就攤上這事油航≌赣梗” “怎么了?”我有些...
    開封第一講書人閱讀 158,084評論 0 348
  • 文/不壞的土叔 我叫張陵谊囚,是天一觀的道長怕享。 經(jīng)常有香客問我,道長镰踏,這世上最難降的妖魔是什么函筋? 我笑而不...
    開封第一講書人閱讀 56,708評論 1 284
  • 正文 為了忘掉前任,我火速辦了婚禮奠伪,結(jié)果婚禮上跌帐,老公的妹妹穿的比我還像新娘。我一直安慰自己绊率,他們只是感情好谨敛,可當我...
    茶點故事閱讀 65,813評論 6 386
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著即舌,像睡著了一般佣盒。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上顽聂,一...
    開封第一講書人閱讀 50,021評論 1 291
  • 那天肥惭,我揣著相機與錄音盯仪,去河邊找鬼。 笑死蜜葱,一個胖子當著我的面吹牛全景,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播牵囤,決...
    沈念sama閱讀 39,120評論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼爸黄,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了揭鳞?” 一聲冷哼從身側(cè)響起炕贵,我...
    開封第一講書人閱讀 37,866評論 0 268
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎野崇,沒想到半個月后称开,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,308評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡乓梨,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,633評論 2 327
  • 正文 我和宋清朗相戀三年鳖轰,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片扶镀。...
    茶點故事閱讀 38,768評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡蕴侣,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出臭觉,到底是詐尸還是另有隱情昆雀,我是刑警寧澤,帶...
    沈念sama閱讀 34,461評論 4 333
  • 正文 年R本政府宣布胧谈,位于F島的核電站忆肾,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏菱肖。R本人自食惡果不足惜客冈,卻給世界環(huán)境...
    茶點故事閱讀 40,094評論 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望稳强。 院中可真熱鬧场仲,春花似錦、人聲如沸退疫。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,850評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽褒繁。三九已至亦鳞,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背燕差。 一陣腳步聲響...
    開封第一講書人閱讀 32,082評論 1 267
  • 我被黑心中介騙來泰國打工遭笋, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人徒探。 一個月前我還...
    沈念sama閱讀 46,571評論 2 362
  • 正文 我出身青樓瓦呼,卻偏偏與公主長得像,于是被迫代替她去往敵國和親测暗。 傳聞我的和親對象是個殘疾皇子央串,可洞房花燭夜當晚...
    茶點故事閱讀 43,666評論 2 350

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

  • 那這次呢?我決定直接就先放一個小小demo上來 其實我們在引入vue-router插件那一刻,我們的網(wǎng)頁就已經(jīng)附帶...
    看物看霧閱讀 807評論 0 1
  • 學習目的 學習Vue的必備技能,必須 熟練使用 Vue-router碗啄,能夠在實際項目中運用质和。 Vue-rout...
    _1633_閱讀 91,941評論 3 58
  • vue2有著深度繼承的路由插件,即:vue-router稚字,其中文的API地址侦另。 vue-router與其他的路由(...
    白水螺絲閱讀 17,526評論 0 17
  • 前言 vue-router是什么:是vue.js官方的路由管理器和vue.js的核心深度的集成,讓開發(fā)者更加簡單的...
    GUAN_one閱讀 3,695評論 0 2
  • Vue八個生命周期 beforeCreate【創(chuàng)建前】created【創(chuàng)建后】 beforeMount【載入前】 ...
    艾薩克菊花閱讀 1,307評論 0 12