<!DOCTYPE html>

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <meta name='viewport' content='width=device-width, initial-scale=1.0, user-scalable=no'/>

        <meta name="MobileOptimized" content="360"/>

        <style>

            html{font-size: calc(100vw / 3.75)}

            body,html{

                width: 100%;

                height: 100%;

                padding: 0;

                margin: 0;

            }

            body{

                font-size: 14px;

                background: rgba(251,251,253,1);

                color: #000;

                font-family:"PingFang SC","microsoft yahei";

            }

            .flex{display:flex;display:-webkit-flex;}

            .jc-center{justify-content:center;-webkit-justify-content:center;}

            .ai-center{align-items:center;-webkit-align-items:center;}

            .fd-column{flex-direction:column;-webkit-flex-direction:column;}

            .noActivity{

                height: 100%;

                text-align: center;

            }

            .noAcitivityMain{

                height: 90%;

                color: #4D5061;

            }

            .noAcitivityMain img{

                width: 1.8rem;

                max-width: 249px;

                max-height: 249px;

            }

            .noAcitivityMain .notice{

                margin-top: 3vh;

                color: rgba(51,53,65,0.5);

            }

        </style>

    </head>

    <body>

        <div class="noActivity relative" id="succOrder">

            <div class="noAcitivityMain flex ai-center jc-center fd-column">

                <img src="img/succOrder.png" alt="" />

                <div class="bold succorder">预约成功！</div>

                <div>您已成功预约，</div>

                <div>稍后我们会推送给您预约成功的消息</div>

            </div>

        </div>

        <script src="js/vue.min.js"></script>

        <script>

            vm = new Vue({

                  el: '#succOrder',

                  data:{

                  },

                  mounted(){

                      //监测回退

                      history.pushState(null, null, document.URL)

                      window.addEventListener('popstate', this.forbidback);

                  },

                  beforeDestroy(){

                      //销毁

                      window.removeEventListener('popstate',this.forbidback);

                  },

                  methods: {

                      forbidback(){

                          //回退按钮点击处理

                          alert('kkkk');

                      }

                  }

            })

        </script>

    </body>

</html>

vue项目微信回退按钮处理的更多相关文章

  1. vue项目微信分享之后路由链接被破坏怎么办

    异常现象: 多页面应用,路由采用hash模式,链接带有"#". 在微信中分享到朋友圈或好友时,分享出去的路由被破坏,打开分享的链接,路由中的“#”会被去掉并追加?fromTimel ...

  2. 直击--vue项目微信小程序页面跳转web-view不刷新-根源

    背景 最近项目需要适配小程序,项目是使用了vue开发的网站,其中改造方式是,每个页面都使用小程序创建一个页面通过web-view来显示指定页面的. 在没有使用小程序时,路由跳转时,刷新页面等等,这个是 ...

  3. vue 项目如何使用微信分享接口

    首先做微信网页都要接入微信sdk: 安装sdk npm install weixin-js-sdk --save 具体可以查看微信公众平台技术文档:https://mp.weixin.qq.com/w ...

  4. vue项目中微信jssdk在ios签名失败

    一.问题描述 1. vue项目中微信jssdk签名时,在安卓和ios是有差异的,签名时使用的url=window.location.href.split('#')[0],此时在安卓没问题,在ios会导 ...

  5. Vue项目history模式下微信分享总结

    原文 : http://justyeh.top/post/39/ 2019-07-02 Vue微信分享 每回遇到微信分享都是一个坑,目前的商城项目使用Vue开发,采用history的路由模式,配置微信 ...

  6. 解决关于 vue项目中 点击按钮路由多了个问号

    问题描述: 在vue项目开发过程中,点击按钮结果页面刷新了一遍 后来发现路径变成了 localhost:8080/?#/login 原因: 这里是 form 表单,点击了button 按钮,触发了他的 ...

  7. vue项目引入FastClick组件解决IOS系统下h5页面中的按钮点击延迟，连续点击无反应的问题

    异常描述: ios系统手机中访问h5页面,按钮点击有延迟,连续点击卡顿.无反应. 异常原因: 这要追溯至 2007 年初.苹果公司在发布首款 iPhone 前夕,遇到一个问题:当时的网站都是为大屏幕设 ...

  8. 解决微信浏览器缓存站点入口文件(IIS部署Vue项目)

    最近开发的微信公众号项目中(项目采用Vue + Vux 构建,站点部署在IIS8.5上),遇到个非常奇葩的问题,发布站点内容后,通过微信打开网址发现是空白页面(后来验证是微信浏览器缓存了入口文件-in ...

  9. 21、解决关于 vue项目中 点击按钮路由多了个问号

    在vue项目开发过程中,点击按钮结果页面刷新了一遍 后来发现路径变成了 localhost:8080/?#/login 原因: 这里是 form 表单,点击了button 按钮,触发了他的默认事件,就 ...

随机推荐

  1. SLAM拾萃(1)：octomap

    前言 大家好,时隔多年之后,我又开始了博客旅程.经历了很多事情之后呢,我发现自己的想法真的很简单:好好读书做课题,闲下来时写写博客,服务大家.所以我会继续写SLAM相关的博客.如果你觉得它对你有帮助, ...

  2. Django路由控制总览

    今日内容:(路由层) 1 简单配置 -第一个参数是正则表达式(如果要精准匹配:'^publish/$') -第二个参数是视图函数(不要加括号) -url(r'^admin/', admin.site. ...

  3. eclipse的thrift插件

    插件网址为:http://thrift4eclipse.sourceforge.net/en/install.html,经测试对Eclipse 4.4.2也有效: Eclipse 4.4.2上的安装步 ...

  4. 转载VC6.0 子窗口和父窗口

    这个是我周一在一家公司做的上机题中的一道,当场没做出来.我当时只跟考官说了设计思路,是带回来查了几本资料书之后才完成的.因为有半个学期没用VC开发了……,最近一直都在实践ASP.NET相关的…… 建立 ...

  5. POJ1751 Highways 2017-04-14 15:46 70人阅读 评论(0) 收藏

    Highways Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 14819   Accepted: 4278   Speci ...

  6. 别做HR最讨厌的求职者

    有些求职者认为自己各方面都与所应聘的职位要求相匹配,因此在被淘汰之后总是特别不解,努力回忆起每个面试环节,却始终找不到原因.是的,也许你真的很优秀,但是你被淘汰了,原因也许并不大,只是你得罪了HR.其 ...

  7. [Elixir004]通过环境变量(Environment Variables)来管理config

    在elixir的config中我们有时会使用的到一些不想暴露出来的配置项,常用的作法是如Phoenix #config/prod.exs use Mix.Config ... # Finally im ...

  8. 窗口间传送数据wsprintf,WM_SETTEXT,SendMessage的理解

    对wsprintf  API函数的理解: int wsprintf ( LPTSTR lpOut, // pointer to buffer for output  LPCTSTR lpFmt, // ...

  9. 论 BUG调试与(程序猿)初学者

    作为一枚程序猿,BUG调试是最基本的技能,对于初学者更是重中之重.个人而言,要想为自己的程序猿生涯更上一层楼,就得知道什么是BUG调试,而且还必须知道怎么调好BUG.那么BUG究竟是什么呢?在我之前的 ...

  10. C#语言各个版本特性(三)

    三.查询集合 1.找出List<Product>列表中符合特定条件的所有元素 C#1.1 查询步骤:循环,if判断,打印 product类 using System.Collections ...