前提條件

目前有這樣一個(gè)需求，在列表中，點(diǎn)擊列表的某個(gè)記錄，會(huì)直接進(jìn)入到A頁(yè)面假設(shè)為：http://localhost:8080/#/index/123，在A頁(yè)面內(nèi)部有以下元素：

（1）一個(gè)返回按鈕，通過(guò)this.$router.go(-1)返回，或者是window.close()直接關(guān)閉頁(yè)面。

（2）一個(gè)a標(biāo)簽的連接，點(diǎn)擊之后頁(yè)面跳轉(zhuǎn)到http://localhost:8080/#/index/234，其實(shí)還是當(dāng)前A頁(yè)面的路由，但是參數(shù)發(fā)生了變化，為了便于說(shuō)明，這里我們假設(shè)為頁(yè)面B。

（3）一個(gè)button按鈕，點(diǎn)擊之后，彈出一個(gè)模態(tài)框，模態(tài)框內(nèi)內(nèi)是一個(gè)ifream，ifream加載的頁(yè)面為：http://localhost:8080/#/second，我們假設(shè)為C頁(yè)面。

需求描述

預(yù)期想實(shí)現(xiàn)的效果有三種場(chǎng)景，分別如下：

（1）通過(guò)列表進(jìn)入到頁(yè)面A，點(diǎn)擊button之后，頁(yè)面C在彈框中ifream里成功加載，然后關(guān)閉模態(tài)框，然后再點(diǎn)擊A頁(yè)面的返回按鈕，直接返回的到列表。

（2）在A頁(yè)面，點(diǎn)擊連接，可以在不刷新當(dāng)前頁(yè)面的情況下，進(jìn)入到頁(yè)面B(其實(shí)也A也同一個(gè)組件），然后重新渲染數(shù)據(jù)，根據(jù)234查詢(xún)最新數(shù)據(jù)去加載和渲染頁(yè)面。

（3）在列表頁(yè)面，通過(guò)打開(kāi)一個(gè)新的瀏覽器標(biāo)簽頁(yè)的方式進(jìn)入到頁(yè)面A，在頁(yè)面A中點(diǎn)擊a標(biāo)簽鏈接，跳轉(zhuǎn)到頁(yè)面B，然后在B頁(yè)面點(diǎn)擊返回按鈕回到A頁(yè)面，再在A頁(yè)面點(diǎn)擊返回按鈕，直接關(guān)閉當(dāng)前標(biāo)簽頁(yè)。

問(wèn)題描述

1 無(wú)法返回到列表

在需求描述的第一種場(chǎng)景中，我們可以會(huì)通過(guò)給ifream直接賦值src的方式去實(shí)現(xiàn)，你會(huì)驚奇的發(fā)現(xiàn)，當(dāng)關(guān)閉模態(tài)框之后，點(diǎn)擊A頁(yè)面上的返回按鈕沒(méi)反應(yīng)，需要再點(diǎn)擊一下才會(huì)返回到列表。 

出現(xiàn)這種問(wèn)題的主要原因還是在于通過(guò)ifream.src賦值，因?yàn)橛蛳嗤?，還是會(huì)忘window.history中插入一條歷史記錄，這是不可避免。

如何解決該問(wèn)題呢？我們可以通過(guò)replace的方式來(lái)解決。

在給ifream的src賦值的時(shí)候，可以通過(guò)如下代碼：

<iframe ref="iframe"></iframe>
 
this.$refs.iframe.contentWindow.location.replace("http://localhost:8080/#/second")

2 無(wú)法渲染的頁(yè)面

在需求描述的第二個(gè)場(chǎng)景中，如果我們?cè)趯?xiě)代碼的時(shí)候，直接給a標(biāo)簽的href賦值為http://localhot:8080/#/index/234，你會(huì)發(fā)現(xiàn)，當(dāng)你點(diǎn)擊鏈接的時(shí)候，頁(yè)面沒(méi)有任何的反映。

這是因?yàn)閷?duì)于vue來(lái)說(shuō)，路由并沒(méi)有發(fā)生變化，僅僅是參數(shù)發(fā)生了變化，我們需要特殊處理。

可以通過(guò)router的beforeRouterEnter和beforeRouteUpdate兩個(gè)鉤子函數(shù)來(lái)解決。

如下：

beforeRouteEnter(to,from,next){
   next(vm=>vm.init());
},
beforeRouteUpdate(to,from,next){
   this.initWithObj(to);
   this.clickCount++;
   next();
},

• beforeRouterEnter是在路由發(fā)生變化進(jìn)入到頁(yè)面之前會(huì)走這個(gè)函數(shù)，此時(shí)組件還沒(méi)有初始化，所以在這個(gè)方法內(nèi)部不能使用this，只能通過(guò)next中的vm對(duì)象進(jìn)行回調(diào)，init()方法是組件中自己聲明的業(yè)務(wù)function，里面有axios查詢(xún)以及頁(yè)面渲染。注意：vm.init()調(diào)用的時(shí)機(jī)是在mountd之后。也就是說(shuō)會(huì)在頁(yè)面加載完成后去調(diào)用。另外就是如果路由沒(méi)有發(fā)生變化，或者不是刷新頁(yè)面，這個(gè)函數(shù)只有走一次，也就是說(shuō)，對(duì)于我們需求中的場(chǎng)景，當(dāng)路由參數(shù)發(fā)生變化的時(shí)候，不會(huì)重復(fù)走該方法。
• beforeRouteUpdate的應(yīng)用場(chǎng)景剛好對(duì)應(yīng)都場(chǎng)景2的需求，在路由不發(fā)生變化，但是參數(shù)發(fā)生變化的時(shí)候，會(huì)調(diào)用該函數(shù)。所以，我們?cè)谶@個(gè)方法中，重新進(jìn)行數(shù)據(jù)的請(qǐng)求和加載，可以看到使用的是initWithObj這個(gè)業(yè)務(wù)方法，傳入的是to這個(gè)對(duì)象，主要是為了獲取變化后的參數(shù)，重新請(qǐng)求后端接口刷新數(shù)據(jù)的。這里注意：不管是通過(guò)$router.go(-1)【對(duì)于路由發(fā)生變化的返回后頁(yè)面會(huì)重新刷新】 還是$router.back()【頁(yè)面不會(huì)刷新，走的緩存】，只要路由的參數(shù)發(fā)生變化了都會(huì)觸發(fā)該方法。 

3 無(wú)法關(guān)閉的新頁(yè)簽

對(duì)于第三種需求場(chǎng)景，我們需要在A頁(yè)面的返回按鈕里面做一些業(yè)務(wù)邏輯處理，就是需要知道當(dāng)前頁(yè)面是否有history，有的話，可以返回，沒(méi)有的話，就直接關(guān)閉頁(yè)面。

查了一些博客和資料，不少人提到可以通過(guò)window.history.length來(lái)判斷，這是一個(gè)誤區(qū)，history.length只會(huì)增加，不會(huì)減少，所以你無(wú)法得知是不是已經(jīng)到了最后一個(gè)頁(yè)面了，也就無(wú)法得知是否要關(guān)閉頁(yè)面。

還有一些博客提到，可以通過(guò)使用document.referrer來(lái)判斷，代碼如下：

if(document.referrer){
    //可以繼續(xù)后退
    this.$router.go(-1);
}else{
    //不可以后退
    window.close();
}

首先，這種寫(xiě)法是不行的，因?yàn)閐ocument.referrer如果為空，就一直為空，他是在什么時(shí)候?yàn)榭漳兀?/p>

就是我們直接打開(kāi)一個(gè)新的瀏覽頁(yè)標(biāo)簽去渲染A頁(yè)面時(shí)，document.referrer為空，即便我們?cè)贏頁(yè)面點(diǎn)擊鏈接跳轉(zhuǎn)到B頁(yè)面了，document.referrer還是為空。

所以按照如上代碼寫(xiě)的時(shí)候，點(diǎn)擊鏈接后B頁(yè)面渲染，再點(diǎn)擊返回按鈕，直接關(guān)閉頁(yè)簽了，回不到A頁(yè)面了。

而且如果按照如上的寫(xiě)法，我們通過(guò)列表直接跳轉(zhuǎn)到A頁(yè)面的場(chǎng)景下，點(diǎn)擊返回按鈕，也永遠(yuǎn)無(wú)法返回，因?yàn)樗叩氖窍旅娴膚indow.close().

如何兼顧頁(yè)簽方式打開(kāi)和列表直接跳轉(zhuǎn)情況下的返回或者關(guān)閉頁(yè)面呢？

有沒(méi)有一種方法可以知道當(dāng)前通過(guò)this.$router.go(-1)是否還有頁(yè)面可以繼續(xù)返回呢？

答案是：沒(méi)有。 我們只能根據(jù)業(yè)務(wù)場(chǎng)景自己去做處理。

下面看如下一段代碼：

if(document.referrer || window.frames.length != parent.frames.length){
    //可以繼續(xù)后退
    this.$router.go(-1);
}else{
    //沒(méi)有父頁(yè)面
    if(this.clickCount>0){
         this.clickCount=-1;
         this.$router.back();
    }else{
         window.close()
    }
}

這里有一個(gè)參數(shù)clickCount，在組件的data中定義，默認(rèn)為0。 他的主要作用是在新瀏覽器頁(yè)簽加載A頁(yè)面時(shí)，判斷是否存在參數(shù)變化情況下的頁(yè)面“跳轉(zhuǎn)”，并實(shí)現(xiàn)路由的返回的。        

總結(jié)

行文至此，三種需求以及場(chǎng)景都可以解決了。

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

最新評(píng)論