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

这篇文章给大家分享的是有关vue如何实现提示保存后退出的方法的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

为什么要使用Vue

Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以创建可维护性和可测试性更强的代码库，Vue允许可以将一个网页分割成可复用的组件，每个组件都包含属于自己的HTML、CSS、JavaScript，以用来渲染网页中相应的地方，所以越来越多的前端开发者使用vue。

尝试的错误做法

一开始的时候我是想着使用vuex结合vue router的beforeEach导航守卫来实现。代码如下:

首先在vuex中新增一个状态值—introduceState

const store = new Vuex.Store({  strict: true, // process.env.NODE_ENV !== 'production', 直接修改state 抛出异常  state: {   ....   introduceState: false,   ....  },  getters: {   introduceState: state => state.currentMenus  },  mutations: {   // 更新introduceState的值   changeIntroduceState (state, value) {    state.introduceState = value   }  } })

用户在点击跳转到另一个页面的时候会触发生命周期函数beforeDestroy，在这个函数中我们可以检测用户的编辑内容是否保存，如果尚未保存。

如果内容尚未保存，我们就弹出一个提示框，当用户选择取消的时候，就将vuex中的introduceState值更新为true。

</script> import { mapGetters, mapActions, mapMutations } from "vuex" export default {  data() {   return {    contentHasSave: false // 记录用户是否已经保存内容   }  },  methods： {   ...mapMutations({    changeIntroduceState: changeIntroduceState   })  }，  beforeDestory: function(){   if(!contentHasSave){    // 使用element的提示框    this.$confirm('您还未保存简介，确定需要提出吗?', '提示', {     confirmButtonText: '确定',     cancelButtonText: '取消',     type: 'warning'    }).then(() => {     // 选择确定，正常跳转    })    .catch(() => {     // 选择取消     this.changeIntroduceState(true)    })   }  } } </script>

最后在router的beforeEach的导航守卫里监测from为当前页面的所有路由跳转。当state的introduceState为true的时候使用next(false)来取消本次路由跳转

import Vue from "vue"; import VueRouter from "vue-router"; import routeConfig from "./routes"; import {sync} from "vuex-router-sync"; import store from "../store"; //加载路由中间件 Vue.use(VueRouter) //定义路由 const router = new VueRouter({  routes: routeConfig,  //mode: 'history' }) sync(store, router) router.beforeEach((to, from, next) => {  // 简介也未提交，取消跳转  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如何实现提示保存后退出的方法”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！