vue实现提示保存后退出的方法

if(from.fullPath === '/adwords/introduce' && store.state.introduceState === 'not-save'){
next(false)
}
})
export default router

这种做法其实是行不通的，因为beforeEach方法的执行其实是在组件beforeDestory的方法之前执行的，也就是说beforeEach执行的时候introduceState的值根本没有被更新为true。

正确的做法

后来自己去翻vue router的官方文档，找到了一个绝妙的方法，那就是组件内的导航守卫。

const Foo = {
 template: `...`,
 beforeRouteEnter (to, from, next) {
  // 在渲染该组件的对应路由被 confirm 前调用
  // 不！能！获取组件实例 `this`
  // 因为当守卫执行前，组件实例还没被创建
 },
 beforeRouteUpdate (to, from, next) {
  // 在当前路由改变，但是该组件被复用时调用
  // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
  // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
  // 可以访问组件实例 `this`
 },
 beforeRouteLeave (to, from, next) {
  // 导航离开该组件的对应路由时调用
  // 可以访问组件实例 `this`
 }
}

上面的描述很清楚，于是我就在组件的js代码里加了一个beforeRouteLeave方法，然后弹出提示框，实现提示保存后退出的功能。

</script>
export default {
 data() {
  return {
   contentHasSave: false // 记录用户是否已经保存内容
  }
 },
  // 组件内导航钩子，处理未保存退出的情况
 beforeRouteLeave: function(to, from , next){
  if(this.buttonText === '提交'){
   next(false)
   this.$confirm('您还未保存简介，确定需要提出吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
   }).then(() => {
    // 选择确定
    next()
   })
  }
 }
}
</script>

实现效果如下：

以上这篇vue实现提示保存后退出的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。