router.go,router.push,router.replace的區別
阿新 • • 發佈:2018-01-27
ddl pos 代碼 不生效 區別 sub 意思 查詢 它的
除了使用 <router-link>
創建 a 標簽來定義導航鏈接,我們還可以借助 router 的實例方法,通過編寫代碼來實現。當你點擊 <router-link>
時,這個方法會在內部調用,所以說,點擊 <router-link :to="...">
等同於調用 router.push(...)
。
聲明式 | 編程式 |
<router-link :to="..."> | router.push(...) |
該方法的參數可以是一個字符串路徑,或者一個描述地址的對象,例如:
// 字符串
router.push(‘home‘)
// 對象
router.push({ path: ‘home‘ })
// 命名的路由
router.push({ name: ‘user‘, params: { userId: 123 }})
// 帶查詢參數,變成 /register?plan=private
router.push({ path: ‘register‘, query: { plan: ‘private‘ }})
const userId = 123
router.push({ name: ‘user‘, params: { userId }}) // -> /user/123
router.push({ path: `/user/${userId}` }) // -> /user/123
// 這裏的 params 不生效
router.push({ path: ‘/user‘, params: { userId }}) // -> /user
router.replace(location, onComplete?, onAbort?)
跟 router.push
很像,唯一的不同就是,它不會向 history 添加新記錄,而是跟它的方法名一樣 —— 替換掉當前的 history 記錄。
聲明式 | 編程式 |
<router-link :to="..." replace> | router.replace(...) |
router.go(n)
這個方法的參數是一個整數,意思是在 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)
router.go,router.push,router.replace的區別