vue返回上一頁(yè)(后退)的幾種方法與區(qū)別

案例

從a頁(yè)面=>b頁(yè)面=>c頁(yè)面，當(dāng)前在c頁(yè)面，執(zhí)行某方法后可以如同按了瀏覽器后退鍵一樣返回b頁(yè)面

方法

①. 若項(xiàng)目使用vue-router，this.$router.go(-1)可以回到上一頁(yè)

②. this.$router.back()

③. window.history.go(-1)

區(qū)別

①與②的區(qū)別是：

go(-1): 原頁(yè)面表單中的內(nèi)容會(huì)丟失：

• this.$router.go(-1)：后退+刷新；
• this.$router.go(0)：刷新；
• this.$router.go(1)：前進(jìn)；

back(): 原頁(yè)表表單中的內(nèi)容會(huì)保留：

• this.$router.back()：后退 ；
• this.$router.back(0)：刷新；
• this.$router.back(1)：前進(jìn)；

③的區(qū)別是：

history.go(-1)是返回瀏覽器的上一頁(yè)，而由于Vue是單頁(yè)面應(yīng)用，有的瀏覽器對(duì)于hash變更不認(rèn)為是兩個(gè)不同的頁(yè)面，在hash模式下就不會(huì)跳回瀏覽器上一頁(yè)

vue的vue-router中返回上一頁(yè)方式

方式1

該方法采用一個(gè)整數(shù)作為參數(shù)，表示在歷史堆棧中前進(jìn)或后退多少步

//原頁(yè)面表單中的內(nèi)容會(huì)丟失：
this.$router.go()
// 向前移動(dòng)一條記錄，與 router.forward() 相同
router.go(1)
// 返回一條記錄，與 router.back() 相同
router.go(-1)
// 前進(jìn) 3 條記錄
router.go(3)
// 如果沒(méi)有那么多記錄，靜默失敗
router.go(-100)
router.go(100)

方式2

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

方式3

編程式導(dǎo)航，點(diǎn)擊后返回指定頁(yè)面，指明返回的頁(yè)面路徑。可以是任意路徑

 this.$router.push("/company");

方式4

window.history.go(-1)

history.go(-1)是返回瀏覽器的上一頁(yè)，而由于Vue是單頁(yè)面應(yīng)用，有的瀏覽器對(duì)于hash變更不認(rèn)為是兩個(gè)不同的頁(yè)面，在hash模式下就不會(huì)跳回瀏覽器上一頁(yè)

其中，在開(kāi)發(fā)階段，方式一用的是最多的，但是需要注意一點(diǎn)，就是其真的是返回到上一頁(yè)，所以有時(shí)候達(dá)不到我們想要的效果，這時(shí)候就可以借助方式三的編程式導(dǎo)航來(lái)解決，無(wú)論上一頁(yè)是什么，點(diǎn)擊返回按鈕都只會(huì)跳轉(zhuǎn)到指定的路由。不過(guò)最好在路由信息好久不變的情況下使用。省的改來(lái)改去的。

總結(jié)

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

最新評(píng)論