精华内容
下载资源
问答
  • 主要介绍了vue离开当前页面触发的函数代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue项目中监听页面刷新和离开

    千次阅读 2020-12-20 12:07:23
    运用的知识点:JavaScript的 onbeforeunload 函数html使用方法vuewindow.onbeforeunload=function(){浏览器return ‘’;...thisonload、onunload、onbeforeunload的执行问题:spa页面加载时只执行on...

    运用的知识点:JavaScript的 onbeforeunload 函数html

    使用方法vue

    window.οnbefοreunlοad=function(){浏览器

    return ‘’;函数

    }学习

    注意:有返回值(' ',true,false...均可以)才能弹出显示,或者有须要执行的事件也行。this

    onload、onunload、onbeforeunload的执行问题:spa

    页面加载时只执行onload.net

    页面关闭时,先onbeforeunload事件,再onunload事件。code

    页面刷新时先执行onbeforeunload,而后onunload,最后onload。htm

    注意:这种执行顺序是有浏览器的兼容问题的,请注意各类浏览器的区别。

    onbeforeunload() 和onunload() 两个事件的区别:

    相同点:

    二者都是在对页面的关闭或刷新事件做个操做。

    不一样点:

    unbeforeunload()事件执行的顺序在onunload()事件以前发生。(由于,unbeforeunload()是在页面刷新以前触发的事                          件,而onubload()是在页面关闭以后才会触发的)。

    unbeforeunload()事件能够禁止onunload()事件的触发。

    onunload()事件是没法阻止页面关闭的。

    浏览器的兼容性不一样。

    vue中监听页面刷新和离开

    方法一:直接在mounted或者activated中写

    mounted() { //写在mounted或者activated生命周期内便可

    window.onbeforeunload = e => { //刷新时弹出提示

    return ''

    };

    },

    兼容性更好的写法:

    window.onbeforeunload = function (e) {

    e = e || window.event;

    // 兼容IE8和Firefox 4以前的版本

    if (e) {

    e.returnValue = '关闭提示';

    }

    // Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+

    return '关闭提示';

    };

    方法二:添加监听

    1. 在methods生命周期钩子中定义事件

    methods: {

    beforeunloadFn (e) {

    // ...

    }

    }

    2.在 mounted 或者 activated 钩子中注册事件

    mounted() {

    window.addEventListener('beforeunload', e => this.beforeunloadFn(e))

    }

    3. 在 destroyed 钩子卸载事件

    destroyed() {

    window.removeEventListener('beforeunload', e => this.beforeunloadFn(e))

    }

    文章仅为本人学习过程的一个记录,仅供参考,若有问题,欢迎指出!

    对博客文章的参考,若原文章博主介意,请联系删除!请原谅

    展开全文
  • js监听用户进入和离开当前页面

    千次阅读 2020-12-20 12:07:24
    用于用户是否离开当前页面// 页面的 visibilityState属性可能返回三种状态 prerender,visible 和 hidden// 监听 visibility change 事件document.addEventListener('visibilitychange', function() {// 页面变为不...

    VisibilityChange 事件;用于用户是否离开当前页面

    // 页面的 visibilityState属性可能返回三种状态 prerender,visible 和 hidden

    // 监听 visibility change 事件

    document.addEventListener('visibilitychange', function() {

    // 页面变为不可见时触发

    if (document.visibilityState == 'hidden') {

    document.title = '离开';

    }

    // 页面变为可见时触发

    if (document.visibilityState == 'visible') {

    document.title = '回来';

    }

    });

    // 页面的 hidden属性,false,true;

    document.addEventListener('visibilitychange',function(){

    var isHidden = document.hidden;

    if(isHidden){

    document.title = '离开';

    } else {

    document.title = '回来';

    }

    });

    作者:牧心

    展开全文
  • console.log('关闭了浏览器') } } } // beforeunload事件在当页面卸载(关闭)或刷新时调用,事件触发的时候弹出一个有确定和取消的对话框,确定则离开页面,取消则继续待在本页; // 以下操作触发beforeunload,...

    根据执行不同的操作(刷新or关闭)所需要的时间来判断是执行了哪个操作。

    浏览器关闭执行的是 beforeunload , unload 这两个事件;
    而浏览器刷新执行的是beforeunload, unload, load 三个事件;

    在mounted生命周期中挂载beforeunload,和unload事件,通过执行间隔时间判断是刷新页面还是卸载(关闭)页面,如果是关闭浏览器,两个事件执行间隔事件会少于5ms,刷新页面时间会长,不同页面经测试所需时间8~100ms之间不等。注意销毁事件 避免影响其他页面 (destroyed生命周期)

    本案例中使用了两个事件beforeunload事件,unload事件,区别如下:

    beforeunload在unload之前执行

    beforeunload

    1. 页面所有资源均未释放,且页面可视区域效果没有变化
    2. UI人机交互失效(window.open,alert,confirm全部失效)
    3. 最后时机可以阻止unload过程的执行.(beforeunload事件的Cancelable属性值为Yes)

    unload

    1. 页面所有资源(img, iframe等)均未被释放
    2. 页面可视区域一片空白
    3. UI人机交互失效(window.open,alert,confirm全部失效)
    4. 没有任何操作可以阻止unload过程的执行。(unload事件的Cancelable属性值为No)

    代码片段:

    mounted () {
      window.addEventListener("beforeunload", () => this.beforeunloadHandler())
      window.addEventListener("unload", () => this.unloadHandler())
    },
    
    destroyed() {
      window.removeEventListener("beforeunload", () => this.beforeunloadHandler())
      window.removeEventListener("unload", () => this.unloadHandler())
    },
    
    methods: {
        beforeunloadHandler() {
          this.beforeUnloadTime = new Date().getTime()
        },
        unloadHandler() {
          this.gapTime = new Date().getTime() - this.beforeUnloadTime
          if (this.gapTime <= 5) { //判断是窗口关闭还是刷新,小于5代表关闭,否则就是刷新。
            console.log('关闭了浏览器')
          }
        }
    }
    // beforeunload事件在当页面卸载(关闭)或刷新时调用,事件触发的时候弹出一个有确定和取消的对话框,确定则离开页面,取消则继续待在本页;
    
    // 以下操作触发beforeunload,onbeforeunload
    // 1 ·关闭浏览器窗口 
    // 2·通过地址栏或收藏夹前往其他页面的时候 
    // 3·点击返回,前进,刷新,主页其中一个的时候 
    // 4·点击 一个前往其他页面的url连接的时候 
    // 5·调用以下事件的时候:click,document.write()方法(输出内容),document.open()
    // 6·当用window open打开一个页面,并把本页的window的名字传给要打开的页面的时候。
    // 7·重新赋予location.href的值的时候。
    // 8·通过input type=”submit”按钮提交一个具有指定action的表单的时候。
    展开全文
  • 代码beforeRouteLeave: function(to, from , next){next(false)this.$confirm('您将离开页面,是否进行数据保存?', '提示', {distinguishCancelAndClose: true,confirmButtonText: '确定',cancelButtonText: '...

    代码

    beforeRouteLeave: function(to, from , next){

    next(false)

    this.$confirm('您将离开本页面,是否进行数据保存?', '提示', {

    distinguishCancelAndClose: true,

    confirmButtonText: '确定',

    cancelButtonText: '取消',

    type: 'warning'

    }).then(() => {

    this.sure();

    next()

    }).catch(() => {

    next()

    });

    }

    参数解释:

    to: Route: 即将要进入的目标 路由对象

    from: Route: 当前导航正要离开的路由

    next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。

    next(): 进行管道中的下一个钩子。如果全部钩子执行完了,则导航的状态就是 confirmed (确认的)。

    next(false): 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮),那么 URL 地址会重置到 from 路由对应的地址。

    next(’/’) 或者 next({ path: ‘/’ }): 跳转到一个不同的地址。当前的导航被中断,然后进行一个新的导航。你可以向 next 传递任意位置对象,且允许设置诸如 replace: true、name: ‘home’ 之类的选项以及任何用在 router-link 的 to prop 或 router.push 中的选项。

    next(error): (2.4.0+) 如果传入 next 的参数是一个 Error 实例,则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。

    确保要调用 next 方法,否则钩子就不会被 resolved

    就像vue的生命周期一样编写就可以了

    作用:路由离开当前页面的时候触发

    引发相应问题

    返回上一页的go(-1)会出现问题

    解决方法: 将模式改为history就可以了

    展开全文
  • 写在开头为什么要写这个文章,因为每个...不做判断,那么用户数据直接丢了梳理需求离开页面方式,被location.href,a标签,关闭浏览器或者当前tab页等...需要判断数据是否跟初始化时一致(用户有无填写表单...)用户选择...
  • 今天说说Vue项目中路由跳转问题,有点时候咱们页面 (pc) 数据特别多的情况下如果填写到一半的时候不小心退出了数据就丢失了,这样体验效果就很不好,所以进行就来解决一下这个问题 vue项目中有一个main.js文件 我呢就在...
  • 最近做一个表单页面,所有的交互效果都是到最后表单保存提交才实现的数据交互,因此出现用户可能不保存页面,而离开页面,造成数据损失,为了避免这样的情况,特意做一个弹窗提示功能,用watch监听数据,如果数据...
  • vue页面离开后执行函数的实例

    千次阅读 2020-12-21 19:31:46
    vue页面离开后执行函数的实例如下所示:destroyed: function () {console.log("我已经离开了!");this.doSomething();},说明:destroyed是与methods、mounted同层级的以上这篇vue页面离开后执行函数的实例就是小编...
  • 在需要缓存的页面设置导航钩子,在A野区离开时将值设置为false保证离开当前野区不被偷 第四步 在其他野区浪一波离开时设置为true,保证回到A野区的时候野区不被刷新,还是原来的状态 补充知识:vue keep – alive ...
  • VUE 离开页面路由拦截

    千次阅读 2020-12-19 11:29:16
    业务场景在页面内容被编辑后,用户跳转其他路由,需要提示用户:当前页面有改动,确认离开后再进行跳转,以防编辑数据丢失。代码beforeRouteLeave (to, from, next) {this.targetName = to.name // 提示框点击确认后...
  • 此功能是点击导航跳转前提示是否保存后在离开,不是关闭...2.跳转路由前做判断 代码如下(示例): data(){ return{ contentHasSave: false //记录是否点击提交了 }; }, beforeRouteLeave(to, from , next).
  • 动画效果的处理遇到的一个问题,当用户离开页面再回来时我会更换一张图片,同时给图片加上晃动的动画效果 但是如何animation直接写死,只会触发一次,当用户离开页面再回来时动画效果并不会再次触发。 此时只需要...
  • vue监听页面离开事件

    千次阅读 2020-04-27 11:11:21
    vue监听页面离开事件 可加入变量判断,根据离开次数加入不同的事件 var app = new Vue({ el: '#app', data() { }, mounted() { document.addEventListener('visibilitychange', this...
  • 当用户正在编辑表单,一个不小心点到了其他路由,眼看着要离开,他到底是发自内心想放弃,还是手滑?所以弹个提醒问问他,这是你真实意愿吗?(如果微博点赞也有确认框,那娱乐圈的各位大大们就没有手滑声明了( ̄︶ ̄...
  • vue 是单页面应用,路由切换后,定时器并不会自动关闭,需要手动清除,当页面被销毁时,清除定时器即可。 data: { return { timer: null } }, created() { this.timer = setInterval(....); }, beforeDestroy()...
  • JS、Vue.js监听用户是否离开当前页面 使用visibilitychange监听document 当触发visibilitychange后,document.visibilityState会有两个值,第一个是hidden:表示当前页面不可见,第二个是visible:表示当前页面至少...
  • export default { data() { return { oldScrollTop: 0, //记录上一次滚动结束后的滚动距离 scrollTop: 0 // 记录当前的滚动距离 } }, watch: { scrollTop(newValue, oldValue) { setTim
  • 刚开始思考觉得很简单,直接在Router的钩子中判断就好了,但是会发现还有新的问题存在,浏览器刷新和当前页面关闭的时候无法监听,最终用window.onbeforeunload成功解决,所以用这篇文章简单记录下整个解决过程。vue...
  • this.$confirm('当前页面数据还未保存,是否离开?', { type: 'warning' }).then(res => { next() }).catch(reason => { next(false) }) }, 2、关闭网址或者浏览器时,提示用户 在需要提示的页面加入...
  • 前言很多时候在访问网页的时候我们总是看到页面在加载中,可以却不知道要加载多久,无期限的等待总是让人烦躁不安,所以我们希望能知道网页加载的进度,这样我们就能做到心中有数是否继续等待页面加载。这个功能我们...
  • 主要介绍了vue实现表单未编辑或未保存离开弹窗提示功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
  • vue页面提示是否保存再离开

    千次阅读 2020-03-27 10:26:58
    mounted(){ window.addEventListener("beforeunload", this.... //离开新增页、编辑页记得解绑,否则其他页面中也会出现提示的效果 beforeDestroy() { window.removeEventListener("beforeunload",this....
  • 虽然刷新与关闭都会走onbeforeunload与onunload,但可能因为刷新在加载新页面前内部机制还需要做一些准备工作,所以刷新事件在执行到onunload事件时,用的时间会比关闭事件时间长。 所以,通过时间差来判断浏览器是...
  • vue 判断是否登录,进入不同的页面

    千次阅读 2018-12-28 11:03:54
    1.以前用的方法是直接在app.vue入口文件来判断跳转登录页面,还是主页面, 优点:简单明了,直接根据是否存在session来判断入口文件是登录还是主页面; 缺点:体验感不好,每次判断前都会有登录页面出现一下,再...
  • Vue中怎么判断窗口状态并且在窗口关闭前发送请求?发布时间:2020-05-29 12:35:23来源:亿速云阅读:348这篇文章为大家详细介绍了Vue判断窗口状态并且在窗口关闭前发送请求的方法,文中示例代码介绍的非常详细,感...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,061
精华内容 1,624
关键字:

vue判断离开当前页面

vue 订阅