• 35648

    文章

  • 23

    评论

  • 20

    友链

  • 最近新加了很多技术文章,大家多来逛逛吧~~~~
  • 喜欢这个网站的朋友可以加一下QQ群,我们一起交流技术。

vue拦截(阻止)浏览器后退事件以及添加页面跳转前的确认对话

欢迎来到阿八个人博客网站。本 阿八个人博客 网站提供最新的站长新闻,各种互联网资讯。 喜欢本站的朋友可以收藏本站,或者加QQ:我们大家一起来交流技术! URL链接:https://www.abboke.com/jsh/2019/0703/5142.html 1190000019642728

需求是这样的:用户在编辑页以及新增页面时,如果用户手动要跳转到其它页面,就出来一个弹窗提示用户巴拉巴拉。。。

然后,使用vue的 beforeRouteLeave 路由守卫可以对一些路由操作进行跳转前提示,但是如果用户点了浏览器的后退按钮,那这个路由守卫基本没用了啊,那个弹窗就闪了一下就消失了,路由直接改变,但是页面不刷新(写这篇文章时,我在想,可能我的路由有问题,不然为什么路由变了,但是页面不刷新?)

下面是代码,在App.vue里面添加:

mounted () {
    if (window.history && window.history.pushState) {
      history.pushState(null, null, document.URL)
      window.addEventListener('popstate', this.goBack, false)
    }
  },
  destroyed () {
    window.removeEventListener('popstate', this.goBack, false)
  },
  methods: {
    goBack () {
      // 该事件仅在浏览器后退按钮被点击时触发
      let needCofirmRouter = ['/addPro']
      console.log(document.URL.split('#')[1])
      history.pushState(null, null, null)
      if (needCofirmRouter.indexOf(document.URL.split('#')[1]) > -1) {
        this.$confirm('请确认数据已保存,页面跳转后已填写的数据会被清空,是否继续跳转?', '提示', {
          confirmButtonText: '是',
          cancelButtonText: '否',
          type: 'warning'
        }).then(() => {
          // 这里不可以使用back,go(-1)等方法,不然会再次触发该事件进入死循环
          // this.$router.go(-1)
        }).catch((ms) => {
        })
      }
    }
  }

相关文章

暂住......别动,不想说点什么吗?
  • 全部评论(0
    还没有评论,快来抢沙发吧!