vue项目微信回退按钮处理
<!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项目微信回退按钮处理的更多相关文章
- vue项目微信分享之后路由链接被破坏怎么办
异常现象: 多页面应用,路由采用hash模式,链接带有"#". 在微信中分享到朋友圈或好友时,分享出去的路由被破坏,打开分享的链接,路由中的“#”会被去掉并追加?fromTimel ...
- 直击--vue项目微信小程序页面跳转web-view不刷新-根源
背景 最近项目需要适配小程序,项目是使用了vue开发的网站,其中改造方式是,每个页面都使用小程序创建一个页面通过web-view来显示指定页面的. 在没有使用小程序时,路由跳转时,刷新页面等等,这个是 ...
- vue 项目如何使用微信分享接口
首先做微信网页都要接入微信sdk: 安装sdk npm install weixin-js-sdk --save 具体可以查看微信公众平台技术文档:https://mp.weixin.qq.com/w ...
- vue项目中微信jssdk在ios签名失败
一.问题描述 1. vue项目中微信jssdk签名时,在安卓和ios是有差异的,签名时使用的url=window.location.href.split('#')[0],此时在安卓没问题,在ios会导 ...
- Vue项目history模式下微信分享总结
原文 : http://justyeh.top/post/39/ 2019-07-02 Vue微信分享 每回遇到微信分享都是一个坑,目前的商城项目使用Vue开发,采用history的路由模式,配置微信 ...
- 解决关于 vue项目中 点击按钮路由多了个问号
问题描述: 在vue项目开发过程中,点击按钮结果页面刷新了一遍 后来发现路径变成了 localhost:8080/?#/login 原因: 这里是 form 表单,点击了button 按钮,触发了他的 ...
- vue项目引入FastClick组件解决IOS系统下h5页面中的按钮点击延迟，连续点击无反应的问题
异常描述: ios系统手机中访问h5页面,按钮点击有延迟,连续点击卡顿.无反应. 异常原因: 这要追溯至 2007 年初.苹果公司在发布首款 iPhone 前夕,遇到一个问题:当时的网站都是为大屏幕设 ...
- 解决微信浏览器缓存站点入口文件(IIS部署Vue项目)
最近开发的微信公众号项目中(项目采用Vue + Vux 构建,站点部署在IIS8.5上),遇到个非常奇葩的问题,发布站点内容后,通过微信打开网址发现是空白页面(后来验证是微信浏览器缓存了入口文件-in ...
- 21、解决关于 vue项目中 点击按钮路由多了个问号
在vue项目开发过程中,点击按钮结果页面刷新了一遍 后来发现路径变成了 localhost:8080/?#/login 原因: 这里是 form 表单,点击了button 按钮,触发了他的默认事件,就 ...
随机推荐
- maven pom.xml几个特殊的插件
1. surefire插件 Maven Surefire 插件有一个 test 目标,该目标被绑定在了 test 阶段. test 目标执行项目中所有能在 src/test/java 找到的并且文件 ...
- cenos 安装nginx并添加到service
系统平台:CentOS release 6.6 (Final) 64位. 一.安装编译工具及库文件 yum -y install make zlib zlib-devel gcc-c++ libtoo ...
- 词频统计-part2
看到这个问题为之一愣,这简单多了,在第一部分的基础上把那些存储结构删了,把排序算法删了,设置一个变量,遇到则加一,直到读到文件尾.最后输出单词出现次数. 程序比较简单也比较,下面就把程序贴出来: pa ...
- 自我介绍和Github的初次体验
姓名:袁宇鹏 学号:1413042045 班级:网络工程142 兴趣爱好:篮球,看书 写过的代码:用C++写过,只能算是看看这源程序修改. 没有开发过任何程序 Github使用流程: ...
- Lucene--FuzzyQuery与WildCardQuery（通配符）
FuzzyQuery: 创建索引: IndexWriter writer = new IndexWriter(path, new StandardAnalyzer(), false); writer. ...
- Selenium下拉菜单(Select)的操作-----Selenium快速入门（五）
对于一般元素的操作,我们只要掌握本系列的第二,三章即可大致足够.对于下拉菜单(Select)的操作,Selenium有专门的类Select进行处理.文档地址为:http://seleniumhq.gi ...
- WPF自定义滚动条
我修改了一些地方,部分代码参考了博主 https://www.cnblogs.com/xiaomingg/ <!-- ScrollViewer 滚动条 --> <Style x:Ke ...
- WP8.1StoreApp(WP8.1RT)---发送邮件和短信
在WP7/8中,发送短信是利用了EmailComposeTask和SmsComposeTask来实现的. 在WP8.1 Store App中,原来的方式已经失效,采用了新的方法:ChatMessage ...
- textarea 高度自动
<textarea id="suggest" type="text" name="suggest" class="form- ...
- python---基本数据类型 dict(字典)
1. 什么是字典 字典是python中唯一的映射类型, 由{ } 括起来的键值对组成,在dict中key是唯一的.字典是以key:value的形式来保存数据, 字典存储数据的时候是用的hash值来存储 ...