vue 页面离开时弹窗提示

  // beforeRouteLeave (to, from, next) {
  // next()
  // this.records = []
  // this.$confirm({
  //   title: '还有未审核的任务，是否释放？',
  //   content: '长时间无效占领任务，审核同学正提刀赶来…',
  //   okText: '是',
  //   cancelText: '取消',
  //   onOk () {
  //     next()
  //   },
  //   onCancel () {
  //     next()
  //   }
  // })
  // },

　　

https://segmentfault.com/a/1190000016874879         vue单页面：当前页面刷新或跳转时提示保存

https://developer.mozilla.org/zh-CN/docs/Web/API/Window/onbeforeunload       onbeforeunload     msdn

https://www.cnblogs.com/deng-jie/p/12792573.html     vue使用router.beforeEach()

https://router.vuejs.org/zh/      官网路由守卫

function doNextPms (to, from, next) {
  NProgress.start()
  to.meta && (typeof to.meta.title !== 'undefined' && setDocumentTitle(`${to.meta.title} - ${domTitle}`))
  if (getToken()) {
    if (to.path === '/user/login') {
      next({ path: '/init' })
      NProgress.done()
    } else {
      if (store.state.user.isLogin) {
        next()
      } else {
        // try {
        //   const originRoutes = await store.dispatch('GetUserInfo')
        //   const accessRoutes = await store.dispatch('GenerateAsyncRoutes', originRoutes)
        //   const redirect = decodeURIComponent(from.query.redirect || to.path)
        //   router.addRoutes(accessRoutes)
        //   if (to.path === redirect) {
        //     // hack方法 确保 addRoutes 已完成 ,set the replace: true so the navigation will not leave a history record
        //     next({ ...to, replace: true })
        //   } else {
        //     next({ path: redirect })
        //   }
        // } catch (error) {
        //   message.error('未登录或授权信息过期，请重新登录')
        //   store.dispatch('LogoutLocal').then(() => {
        //     next({ path: '/user/login', query: { redirect: to.fullPath } })
        //   })
        // }
        store.dispatch('GetUserInfo')
          .then(() => {
            store.dispatch('GetAllRuleList')
              .then(async originRoutes => {
                const accessRoutes = await store.dispatch('GenerateAsyncRoutes', originRoutes)
                // const redirect = decodeURIComponent(from.query.redirect || to.path)
                router.addRoutes(accessRoutes)
                next({ ...to, replace: true })
                // if (to.path === redirect) {
                //   // hack方法 确保 addRoutes 已完成, set the replace: true so the navigation will not leave a history record
                //   next({ ...to, replace: true })
                // } else {
                //   next({ path: redirect })
                // }
                // next({ path: '/dashboard' })
              })
              .catch(() => next({ path: '/dashboard' }))
          })
          .catch(() => {
            message.error('未登录或授权信息过期，请重新登录')
            store.dispatch('LogoutLocal').then(() => {
              next({ path: '/user/login', query: { redirect: to.fullPath } })
            })
          })
      }
    }
  } else {
    if (whiteList.includes(to.name)) {
      next()
    } else {
      next({ path: '/user/login', query: { redirect: to.fullPath } })
      NProgress.done()
    }
  }
}
router.beforeEach(async (to, from, next) => {
  // console.log('router.beforeEach', to, from, next)
  // doNextPms(to, from, next)
  const needFreeTask = localStorage.getItem('needFreeTask')
  // 需要判断的路由页面
  const targetPage = ['auditImageBase', 'auditImageVideo', 'auditTextBase', 'auditWorkBase', 'auditResource', 'imImage']
  if (targetPage.indexOf(from.name) > -1) {
    // 需要释放才confirm提示
    if (needFreeTask == 'true') {
      Modal.confirm({
        title: '还有未审核的任务，是否释放？',
        content: '长时间无效占领任务，审核同学正提刀赶来…',
        okText: '是',
        cancelText: '取消',
        onOk () {
        // 请求接口释放
          const arg = {
            type: from.params.type,
            sp_type: from.query.type
          }
          if (from.name === 'auditResource') {
            arg.type = 4
            arg.sp_type = 1
          }
          if (from.name === 'imImage') {
            arg.type = 2
            arg.sp_type = 5
          }
          store.dispatch('MyFreeTask', arg).then((res) => {
            console.log('MyFreeTask ..', res)
            if (res.code == 0) {
              message.success('任务已释放')
            } else {
              message.error(res.msg)
            }
            doNextPms(to, from, next)
          })
        },
        onCancel () {
        // 什么也不做
          doNextPms(to, from, next)
        }

      })
    } else {
      // 什么也不做
      doNextPms(to, from, next)
    }
  } else {
    doNextPms(to, from, next)
  }
})