閱讀本文約需要5分鐘

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

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。