$router.back()和$router.go()

返回上一頁，有兩種方法：

1. $router.back()

2. $router.go()

使用$router.back()和$router.go(-1)作用相同，都是返回原頁面，但如果原頁面路由攜帶參數(shù)，使用以上兩個(gè)方式返回的原頁面路由參數(shù)消失，此時(shí)使用$router.back(-1)返回原頁面路由，參數(shù)仍存在。

• go(-1):原頁面表單中的內(nèi)容會(huì)丟失；
• this.$router.go(-1):后退+刷新；
• this.$router.go(0):刷新；
• this.$router.go(1):前進(jìn)； 
• history.go(-1):后退+刷新；
• history.go(1):前進(jìn)； 
• back():原頁表表單中的內(nèi)容會(huì)保留；
• this.$router.back()：后退
• this.$router.back(0) 刷新
• this.$router.back(1) 前進(jìn) 
• history.back() 后退
• history.back(0) 刷新
• history.back(1) 前進(jìn)

vue點(diǎn)擊按鈕跳轉(zhuǎn)頁面總結(jié) router.push router.replace router.go

總結(jié)一下在Vue里面跳轉(zhuǎn)頁面的方法

首先是vue提供的router-link，使用后再頁面里會(huì)轉(zhuǎn)換為a標(biāo)簽

<router-link to="/test">go home</router-link>

使用函數(shù)進(jìn)行任意頁面跳轉(zhuǎn)

普通跳轉(zhuǎn)

<button @click="jump('/test')">Click Me</button> ? ?// 這里進(jìn)行設(shè)置要跳轉(zhuǎn)的路由
methods: {
? ? ? ? jump (path) {
? ? ? ? ? ? this.$router.replace(path)
? ? ? ? }
? ? ? ??
?? ??? ?// 或者
?? ??? ?jump (path) {
? ? ? ? ? ? this.$router.push({path: path})
? ? ? ? }
? ? }

帶參數(shù)跳轉(zhuǎn)

<button @click="jump('/test')">Click Me</button> ? ?// 這里進(jìn)行設(shè)置要跳轉(zhuǎn)的路由
methods: {
?? ??? ?jump (path) {
? ? ? ? ? ? this.$router.push({path: `${path}?a=1`})
? ? ? ? }
? ? ? ??
? ? ? ? // 或者
? ? ? ? jump (path) {
? ? ? ? ? ? this.$router.push({path: path, query:{a:123}})
? ? ? ? }
? ? }

前進(jìn)

@click="$router.go(1)"

后退

@click="$router.back()"
?? ?// 或者
@click="$router.go(-1)"

刷新當(dāng)前頁面

@click="$router.go(0)"
?? ?// 或者
window.location.reload()
?? ?// 或者
history.go(0)

解析router.push 和 router.replace的區(qū)別 

先說結(jié)論：router.push會(huì)在瀏覽器歷史紀(jì)錄里面添加一條記錄，router.replace不會(huì)在瀏覽器的歷史記錄里面添加信息。也就是通過router.push跳轉(zhuǎn)的頁面能夠返回上一頁。這里的上一頁指的是跳轉(zhuǎn)之前的那一頁

驗(yàn)證：首先打開一個(gè)新的vue項(xiàng)目，把鼠標(biāo)指針放在瀏覽器左上角的回退按鈕并按住左鍵，能夠看到目前瀏覽器歷史記錄除了默認(rèn)新開打的一個(gè)頁面沒有任何其他vue路由信息

使用 this.$router.replace(path)這個(gè)方法跳轉(zhuǎn)后，再次點(diǎn)擊，可以看到路由跳轉(zhuǎn)后，歷史紀(jì)錄里面跟新打開的項(xiàng)目一樣。

說明使用router.replace不會(huì)往瀏覽器歷史記錄里添加信息。并且點(diǎn)擊返回按鈕也是返回到空頁面，并不會(huì)返回到vue的首頁

然后使用this.$router.push(path)方法，點(diǎn)擊跳轉(zhuǎn)后能夠看到歷史記錄里面多了一條記錄

點(diǎn)擊返回后，也能夠返回到首頁。

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論