Vue 离开页面时的校验-mixin-beforeRouteLeave

Posted 2020-12-18 leslie1943

一定要看下函数前的注释, 需要在使用的页面定义【needCheckFlag】data属性

一定要看下函数前的注释, 需要在使用的页面定义【needCheckFlag】data属性

一定要看下函数前的注释, 需要在使用的页面定义【needCheckFlag】data属性

/**
 * what for: check when leave
 * how to use:
 * step-1: import routeLeaveCheck from ‘@/mixins/router/leave-check‘
 * step-2: mixins: [routeLeaveCheck],
 * step-3: ???
 *    define 【 needCheckFlag 】 in your own vue file(default value is true)
 *    sometime you dont‘ need checking when leave this page(click button, router-link etc..),
 *    you can change the value to be "false" before such kind operations
 */
export default {
  beforeRouteLeave(to, from, next) {
    if (this.needCheckFlag) {
      this.$confirm(‘确定离开此页面?‘, ‘提示‘, {
        confirmButtonText: ‘确定‘,
        cancelButtonText: ‘取消‘,
        type: ‘warning‘
      }).then(() => { 
        // some logic
        next() 
      })
        .catch(() => { next(false) })
    } else {
      next()
    }
  }
}