个人网站备案内容,东台市住房和城乡建设局网站,wordpress首页弹出公告,南京网站建设外贸阅读本文约需要5分钟大家好#xff0c;我是你们的导师#xff0c;我每天都会在这里给大家分享一些干货内容(当然了#xff0c;周末也要允许老师休息一下哈)。上次老师跟大家分享了VUE 之 v-on指令的知识#xff0c;今天跟大家分享下Vue之 点击返回弹出推荐商品弹窗的知识。… 阅读本文约需要5分钟大家好我是你们的导师我每天都会在这里给大家分享一些干货内容(当然了周末也要允许老师休息一下哈)。上次老师跟大家分享了VUE 之 v-on指令的知识今天跟大家分享下Vue之 点击返回弹出推荐商品弹窗的知识。1 需求场景非推荐商品详情页返回的时候弹出弹窗推荐商品点击弹窗按钮可以直接访问推荐商品只有直接进入商品详情页返回才会弹出推荐商品弹窗每个用户访问只能弹一次(除非清除缓存)。2 需求分析1. 判断是否直接进入商品详情页可以在商品详情页直接判断 history.length 如果是则 history.length2 2. 每个用户只能弹一次可以保存一个标志值 hasBeenRecommendedtrue 到缓存中有了这个标志值就不再弹出3. 返回的监控还是要监听页面的popstate如果要阻止原来的返回操作的话就要给页面栈添加一个空栈 history.pushState(null, null, document.URL);3 实例代码1. vue框架内页面初始化时判断是否需要推荐弹窗......//修改历史记录状态需要放在商品数据初始化之后if(history.length2 !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 之 点击返回弹出推荐商品弹窗你学会了多少欢迎在留言区评论对于有价值的留言我们都会一一回复的。如果觉得文章对你有一丢丢帮助请点右下角【在看】让更多人看到该文章。
