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

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

1. $router.back()

2. $router.go()

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

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

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

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

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

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

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

普通跳轉(zhuǎn)

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

前進

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

后退

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

刷新當前頁面

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

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

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

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

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

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

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

點擊返回后，也能夠返回到首頁。

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

最新評論