1. 程式人生 > >router.go,router.push,router.replace的區別

router.go,router.push,router.replace的區別

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的區別