閱讀本文約需要5分鐘

大家好，我是你們的導(dǎo)師，我每天都會(huì)在這里給大家分享一些干貨內(nèi)容(當(dāng)然了，周末也要允許老師休息一下哈)。上次老師跟大家分享了VUE 之 v-on指令的知識(shí)，今天跟大家分享下Vue之 點(diǎn)擊返回彈出推薦商品彈窗的知識(shí)。

1 需求場(chǎng)景非推薦商品詳情頁(yè)返回的時(shí)候彈出彈窗推薦商品，點(diǎn)擊彈窗按鈕可以直接訪問(wèn)推薦商品；只有直接進(jìn)入商品詳情頁(yè)返回才會(huì)彈出推薦商品彈窗；每個(gè)用戶(hù)訪問(wèn)只能彈一次(除非清除緩存)。2 需求分析1. 判斷是否直接進(jìn)入商品詳情頁(yè)可以在商品詳情頁(yè)直接判斷 history.length ，如果是則 history.length=2 ；2. 每個(gè)用戶(hù)只能彈一次可以保存一個(gè)標(biāo)志值 hasBeenRecommended=true 到緩存中，有了這個(gè)標(biāo)志值就不再?gòu)棾?#xff1b;3. 返回的監(jiān)控，還是要監(jiān)聽(tīng)頁(yè)面的popstate，如果要阻止原來(lái)的返回操作的話，就要給頁(yè)面棧添加一個(gè)空棧：?history.pushState(null, null, document.URL);3?實(shí)例代碼1. vue框架內(nèi)頁(yè)面初始化時(shí)判斷是否需要推薦彈窗：......//修改歷史記錄狀態(tài)，需要放在商品數(shù)據(jù)初始化之后if(history.length<=2 && !localStorage.getItem("hasBeenRecommended")) { //獲取推薦數(shù)據(jù)信息，頁(yè)面返回標(biāo)識(shí)修改及頁(yè)面棧加入空棧操作在判斷非當(dāng)前頁(yè)面之后再進(jìn)行 this.getRecommendGoodInfo();}......注：本例需要調(diào)用后端接口動(dòng)態(tài)配置，可以在獲取商品詳情數(shù)據(jù)之后進(jìn)行，也可以在頁(yè)面初始化時(shí)查詢(xún)商品詳情時(shí)異步進(jìn)行，這個(gè)影響不大，盡量不要在返回監(jiān)聽(tīng)的邏輯中處理，如果推薦商品數(shù)據(jù)需要調(diào)用后端接口的話，還是放在頁(yè)面初始化時(shí)處理比較好。2. 獲取推薦商品詳情信息：? ?/** * 獲取推薦權(quán)益卡信息數(shù)據(jù) */ getRecommendGoodInfo: function() { var self = this self.$ajax({ method: 'post', url: self.$utils.DOMIN + 'goods/getAdvert', }).then((response) => { var data = response.data.d if(data && data.goodsId != self.$route.query.goodsId) { //給頁(yè)面添加空的頁(yè)面棧，同時(shí)給推薦彈窗填充數(shù)據(jù) history.pushState(null, null, document.URL); //保存阻斷返回的標(biāo)志到緩存中　　　　　　　　　　　　localStorage.setItem('stopBack',true); //填充彈窗元素?cái)?shù)據(jù)源 self.recommendGoodInfo = data } }).catch(function(error) { console.log(error); }); }注：給頁(yè)面添加空的頁(yè)面棧的同時(shí)保存一個(gè)標(biāo)志值到緩存中，那么在返回的時(shí)候如果有這個(gè)值就彈出彈窗，同時(shí)將這個(gè)值進(jìn)行重置或清除。3. 返回監(jiān)控，在vue框架外圍處理: /** * 返回監(jiān)控，若緩存中返回標(biāo)識(shí)為666，則彈出推薦權(quán)益卡彈窗，同時(shí)緩存中保存已經(jīng)彈出推薦彈窗的標(biāo)識(shí) */ window.addEventListener("popstate", () => { if(localStorage.getItem("stopBack")) {　　　　　　//使用jquery或原生js的方式是彈窗顯示 $(".showRecommendModal").fadeIn()　　　　　　　　localStorage.removeItem('stopBack') localStorage.setItem("hasBeenRecommended", true) } })注：監(jiān)聽(tīng)瀏覽器的返回本身就會(huì)破壞掉vue的路由，所以這個(gè)操作只能在vue框架外圍來(lái)進(jìn)行。如此，彈窗的數(shù)據(jù)是在vue框架中填充的，彈窗的顯示是在原生js的返回監(jiān)控中處理的。后記：整體來(lái)說(shuō)，感覺(jué)上邊的這種方案還是比較好的，當(dāng)然如果喜歡原生js的話，也可以在vue框架中將推薦商品數(shù)據(jù)保存到緩存中，然后在返回監(jiān)控的邏輯中以操作DOM的方式將彈窗追加到html結(jié)構(gòu)中去，不過(guò)個(gè)人是不喜歡操作DOM的。參考：https://www.cnblogs.com/xyyt/p/10517187.html今天就分享這么多，關(guān)于VUE 之 點(diǎn)擊返回彈出推薦商品彈窗，你學(xué)會(huì)了多少？歡迎在留言區(qū)評(píng)論，對(duì)于有價(jià)值的留言，我們都會(huì)一一回復(fù)的。如果覺(jué)得文章對(duì)你有一丟丟幫助，請(qǐng)點(diǎn)右下角【在看】，讓更多人看到該文章。

總結(jié)

以上是生活随笔為你收集整理的ajax获取数据用弹窗显示_Vue之 点击返回弹出推荐商品弹窗的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。