想要導航到不同的 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)
}