解决Vue 浏览器后退无法触发beforeRouteLeave的问题
现象
加载第一个组件(这里的第一个意思是浏览器历史记录的第一个,后文称为 待监听组件 )时,正常跳转其他页面可以触发beforeRouteLeave。 但是 按浏览器的后退按钮监听不到该事件。
解决方案
目前采用比较土且不实用的解决方案。加一层组件,再router.push到 待监听组件 ,使得 待监听组件 非第一个组件,可以正常监听beforeRouteLeave事件。
注意点:
由于打乱了原来的路由。需要在main.js中添加全局的路由监听
router.beforeEach((to, from, next) => { if (to is '用于跳转的组件' && from is '待监听组件') { router.go(-1) next(false) } else { next() } // 这样当从一个普通页面A进入待监听组件时,在待监听组件中按返回键时能正常进入A })
总结
以上所述是小编给大家介绍的解决Vue 浏览器后退无法触发beforeRouteLeave的问题,希望对大家有所帮助!
相关推荐
-
解决Vue2.0自带浏览器里无法打开的原因(兼容处理)
本文介绍了解决Vue2.0自带浏览器里无法打开的原因(兼容处理),分享给大家,希望对大家有帮助 Vue 之 android内嵌H5页面不显示出现这个问题,原因有很多 首先,别急,请看下面的推荐方案: 1.找个Android真机测试下(机型版本为4.4以上),真机联调测试 Android 只需要四个步骤: 1.先保证 是否安装了chrome浏览器 2.其次 ,保证 chrome 是否 已经翻墙成功! 3.最后 使用Android 真机连接 电脑 4.最后的最后,打开chrome ,输入:chrom
-
Vue服务端渲染和Vue浏览器端渲染的性能对比(实例PK )
Vue 2.0 开始支持服务端渲染的功能,所以本文章也是基于vue 2.0以上版本.网上对于服务端渲染的资料还是比较少,最经典的莫过于Vue作者尤雨溪大神的 vue-hacker-news.本人在公司做Vue项目的时候,一直苦于产品.客户对首屏加载要求,SEO的诉求,也想过很多解决方案,本次也是针对浏览器渲染不足之处,采用了服务端渲染,并且做了两个一样的Demo作为比较,更能直观的对比Vue前后端的渲染. talk is cheap,show us the code!话不多说,我们分别来看两个D
-
解决Vue 浏览器后退无法触发beforeRouteLeave的问题
现象 加载第一个组件(这里的第一个意思是浏览器历史记录的第一个,后文称为 待监听组件 )时,正常跳转其他页面可以触发beforeRouteLeave. 但是 按浏览器的后退按钮监听不到该事件. 解决方案 目前采用比较土且不实用的解决方案.加一层组件,再router.push到 待监听组件 ,使得 待监听组件 非第一个组件,可以正常监听beforeRouteLeave事件. 注意点: 由于打乱了原来的路由.需要在main.js中添加全局的路由监听 router.beforeEach((to, fr
-
解决vue页面刷新或者后退参数丢失的问题
在toB的项目中,会经常遇到列表数据筛选查询的情景,当要打开某一项的详情页或者暂时离开列表页,再返回(后退时),选择的筛选条件会全部丢失,辛辛苦苦选择好的条件全没了,还得重新选择,如果有分页的更头大,还得重新一页页翻到之前看到的那一页,用户体验极度不友好. 我的解决有两种: 第一种方法:用vue 的<keep-alive>,即在<router-view>外套一层<keep-alive>. 虽然可以达到一定效果,但是控制起来比较麻烦,比如项目中并不是所有页面都需要缓存,代
-
vue中解决chrome浏览器自动播放音频和MP3语音打包到线上的实现方法
一.vue中解决chrome浏览器自动播放音频 需求 有新订单的时候,页面自动语音提示和弹出提示框: 问题 chrome浏览器在18年4月起,就在桌面浏览器全面禁止了音视频的自动播放功能.严格地来说,是Chrome不允许在用户对网页进行触发之前播放音频.不光是这样,在页面加载完毕的情况下,用户没有click.dbclick.touch等主动交互行为,使用js直接调用.play() 方法的话,chrome都会抛出如下错误:Uncaught (in promise) DOMException: 解决
-
解决vue elementUI 使用el-select 时 change事件的触发问题
如下所示: <el-select v-model="level" size="mini" placeholder="请选择" :change="selectChange()"> <el-option v-for="item in select" :key="item.value" :label="item.label" :value="it
-
解决微信浏览器缓存站点入口文件(IIS部署Vue项目)
最近开发的微信公众号项目中(项目采用Vue + Vux 构建,站点部署在IIS8.5上),遇到个非常奇葩的问题,发布站点内容后,通过微信打开网址发现是空白页面(后来验证是微信浏览器缓存了入口文件-index.html,顾之前版本的index页面找不到对应的js,因为我们每次发布会将之前的版本放至另外的备份目录),但关闭网页再次去打开又是正常的.最初开发内部测试时该问题没有引起关注,因为开发人员大部分都是android的手机,后来测试发现,某些android机型不是必现此问题,但是苹果(IOS)机
-
解决Vue.js父组件$on无法监听子组件$emit触发事件的问题
最近学习vuejs看例子中用$on无法监听子组件$emit触发事件: 使用版本 vue.js 2.2.5 参考文献 1.vuejs API 2.解决实例 问题分析 1.之前写的自定义组件事件触发为this.$emit("myclick",this.todo.text);,这样this指的是todo-item的每一项,而最后vm.$on监听的是app组件,也就出说监听的是父节点,而触发的是子节点,故监听不到这个事件的. 解决思路 1.将触发事件放在父节点上触发,就可以监听到触发的事件了,
-
快速解决Vue项目在IE浏览器中显示空白的问题
vue项目在IE浏览器中显示空白,是因为js文件没有加载,需要引入babel-polyfill这个东西,而用vue脚手架搭建的项目是没有引入此工具的 引入方法: 打开packge.json,在dependencies中加入:"babel-polyfill" : "^6.23.0" 然后重新npm install 在App.vue文件中import:import "babel-polyfill" 这样IE浏览器就显示正常了. 以上这篇快速解决Vu
-
vue首次赋值不触发watch的解决方法
最近有个新需求,表单要求增量提交,但是身份证要求无则可提交,有错无法提交,只能新写个校验,但是还不能进组件就监控,后来发现watch有个immediate 选项 watch:{ "aaa":{ immediate:true, handler:function(){ } } 以上这篇vue首次赋值不触发watch的解决方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.
-
在vue中阻止浏览器后退的实例
如下所示: history.pushState(null, null, document.URL); window.addEventListener('popstate', function() { history.pushState(null, null, document.URL); }); vue阻止浏览器后退按钮与js相同,同样没有脱离原生的js 以上这篇在vue中阻止浏览器后退的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.
-
解决Vue中的生命周期beforeDestory不触发的问题
分享一句很有用的经验: 给router-view加了个keep-alive导致组件缓存了,所以不会触发beforeDestory和destoryed 结束! 补充知识:vuex actions正确使用vue-resource的方式( Error in mounted hook: "TypeError: Cannot read property 'get' of u) 场景 . SPA中 使用vuex初始化一项数据,在vuex的actions中需要使用vue-resource 使用的方式是 act
随机推荐
- Angular ng-repeat遍历渲染完页面后执行其他操作详细介绍
- 整理的比较全的一句话后门代码(方面大家查找后门)
- js 性能优化之快速响应的用户界面
- 详解ios中的SQL数据库文件加密 (使用sqlcipher)
- iOS实现淘宝上拉进入详情页交互效果
- Centos7/RHEL7双网卡绑定的方法
- Android列表实现(1)_数组列表实例介绍
- 学好C++必须做到的50条 绝对经典!
- NodeJS url验证(url-valid)的使用方法
- mysql忘记密码怎么办(windows linux)
- JSON 数字排序多字段排序介绍
- position:relative/absolute无法冲破的等级
- 详解XML,Object,Json转换与Xstream的使用
- SpringMVC对日期类型的转换示例
- mysql创建Bitmap_Join_Indexes中的约束与索引
- 解析Java实现随机验证码功能的方法详解
- vue better-scroll插件使用详解
- windows下python 3.6.4安装配置图文教程
- PyQt5的安装配置过程,将ui文件转为py文件后显示窗口的实例
- Python Django的安装配置教程图文详解