1、router.push(location)=====window.history.pushState
除了使用 <router-link> 創(chuàng)建 a 標(biāo)簽來(lái)定義導(dǎo)航鏈接祟滴,我們還可以借助 router 的實(shí)例方法,通過(guò)編寫代碼來(lái)實(shí)現(xiàn)琳钉。
router.push(location)
想要導(dǎo)航到不同的 URL童社,則使用 router.push 方法盖淡。這個(gè)方法會(huì)向 history 棧添加一個(gè)新的記錄,所以狡相,當(dāng)用戶點(diǎn)擊瀏覽器后退按鈕時(shí)梯轻,則回到之前的 URL。
當(dāng)你點(diǎn)擊 <router-link> 時(shí)尽棕,這個(gè)方法會(huì)在內(nèi)部調(diào)用喳挑,所以說(shuō),點(diǎn)擊 <router-link :to="..."> 等同于調(diào)用 router.push(...)。
聲明式:<router-link :to="...">
編程式:router.push(...)
該方法的參數(shù)可以是一個(gè)字符串路徑伊诵,或者一個(gè)描述地址的對(duì)象单绑。
// 字符串
router.push('home')
// 對(duì)象
this.$router.push({path: '/login?url=' + this.$route.path});
// 命名的路由
router.push({ name: 'user', params: { userId: 123 }})
// 帶查詢參數(shù),變成/backend/order?selected=2
this.$router.push({path: '/backend/order', query: {selected: "2"}});
2曹宴、router.replace(location)=====window.history.replaceState
跟router.push很像搂橙,唯一的不同就是,它不會(huì)向 history 添加新記錄笛坦,而是跟它的方法名一樣 —— 替換掉當(dāng)前的 history 記錄
3.router.go(n)====window.history.go
// 在瀏覽器記錄中前進(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)