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 按钮,触发了他的默认事件,就 ...
随机推荐
- etl使用表
select * from etl_data_map t;select * from etl_column t;select * from etl_table_def t;select * from ...
- jsoncpp学习
// MyJsonTest.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include <fstream> #includ ...
- Oracle 11g PL/SQL Developer登入时候报ORA-12638: 身份证明检索失败的解决办法（安装了6遍，吐血之作）
1.报这个错的时候会弹出一个对话框,先点击终止 2.然后汇报出这个是错误的窗口,然后点击确认,但是不要关这个安装窗口也不要其他不必要操作,窗口最小化 3.找到product文件夹,一般在app文件里 ...
- （转）【经验之谈】Git使用之TortoiseGit配置VS详解
原文地址:http://www.cnblogs.com/xishuai/p/3590705.html 前言 上一篇<[经验之谈]Git使用之Windows环境下配置>: 安装 配置和使用 ...
- Vertex-Based Diffusion for 3-D Mesh Denoising（三维网格去噪中基于顶点的扩散算法）
Abstract—We present a vertex-based diffusion for 3-D mesh denoising by solving a nonlinear discrete ...
- （深搜）棋盘问题 -- poj -- 1321
链接: http://poj.org/problem?id=1321 Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 2889 ...
- [转]分布式中使用Redis实现Session共享(二)
本文转自:http://www.cnblogs.com/yanweidie/p/4678095.html 上一篇介绍了一些redis的安装及使用步骤,本篇开始将介绍redis的实际应用场景,先从最常见 ...
- kubernetes 滚动更新发布及回滚
基本命令 记录历史 --record kubectl apply -f **** --record 查看当前状态 kubectl rollout status deployment/demo -w ...
- ajax 与 form 提交的区别
有如下几种区别: 1. Ajax在提交.请求.接收时,都是异步进行的,网页不需要刷新:Form提交则是新建一个页面,哪怕是提交给自己本身的页面,也是需要刷新的: 2. A在提交时,是在后台新建一个请求 ...
- WPF 触摸屏多点触控图像的缩放旋转和移动
<dxc:DXWindow xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors" xmlns:d ...