博客

vue项目中使用beforeRouterLeave来拦截路由遇到的闪动问题（vant框架）

在做移动端是提出需求返回是确认是否确认返回，考虑到移动端可能会手滑动屏幕来退出，所以需要采用检测路由变化来让用户选择

开始单纯的在路由守卫中使用组件判断，但是会出现第一次点击有效，后面点击出现页面闪动或者只改变url没有改变页面的问题，在网上搜索有两个解决方案，一个是使用history，另一个是采用定时器来解决，我就是采用了第二种方式

代码如下

beforeRouteLeave(to, from, next) {
    next(false)
    if (to.path === '/appraisal/testTable') {
      // 如果是退出就确定是否要退出
      console.log('检测到退出页面')
      setTimeout(() => {
        this.$dialog
          .confirm({
            message: '你确定要返回吗？',
            closeOnPopstate: 'false'
          })
          .then(() => {
            next()
          })
          .catch(() => {
            next(false)
          })
      }, 200)
    } else {
      // 如果不是返回就执行下一步路由跳转
      next()
    }
  }

问题根源还不知道，已往知道的朋友留言解惑~