借助 router 的實(shí)例方法，通過編寫代碼來實(shí)現(xiàn)

• this.$router.push(location, onComplete?, onAbort?)

會向 history 添加新記錄

點(diǎn)擊 <router-link :to="..."> (聲明式導(dǎo)航)等同于調(diào)用 this.$router.push(...)

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


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


// 命名的路由
this.$router.push({ name: 'user', params: { userId: '123' }})
//想要此處的params生效，則對象中不能同時有path和params屬性
/***************
this.$router.push({ path: '/user', params: { userId }}) // -> /user  這里的 params 不生效
***************/
//要寫path屬性，同時要有動態(tài)路由參數(shù)
const userId = '123'
this.$router.push({path: `/user/${ userId }`}) // -> /user/123
//同樣的規(guī)則也適用于 router-link 組件的 to 屬性。


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

• this.$router.replace(location, onComplete?, onAbort?)

不會向 history 添加新記錄，而是替換掉當(dāng)前的 history 記錄。

• this.$router.go(n)

參數(shù)是一個整數(shù)，意思是在 history 記錄中向前或者后退多少步

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

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

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

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