vue實現(xiàn)提示保存后退出的方法

更新時間：2018年03月15日 11:14:04 作者：小迪的博客

下面小編就為大家分享一篇vue實現(xiàn)提示保存后退出的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

假設有這樣一個需求，用戶在一個頁面內(nèi)編輯文字，但是并未點擊保存并且跳轉到了下一個路由。比較好的做法應該是給出一個提示—“您編輯的內(nèi)容還未保存，是否確認退出？”用戶如果點擊“確定”，那么不保存當前內(nèi)容直接退出，用戶如果點擊“取消”，則取消本次路由跳轉，繼續(xù)留在原來的頁面。

嘗試的錯誤做法

一開始的時候我是想著使用vuex結合vue router的beforeEach導航守衛(wèi)來實現(xiàn)。代碼如下:

首先在vuex中新增一個狀態(tài)值—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
  }
 }
})

用戶在點擊跳轉到另一個頁面的時候會觸發(fā)生命周期函數(shù)beforeDestroy，在這個函數(shù)中我們可以檢測用戶的編輯內(nèi)容是否保存，如果尚未保存。

如果內(nèi)容尚未保存，我們就彈出一個提示框，當用戶選擇取消的時候，就將vuex中的introduceState值更新為true。

</script>
import { mapGetters, mapActions, mapMutations } from "vuex"
export default {
 data() {
  return {
   contentHasSave: false // 記錄用戶是否已經(jīng)保存內(nèi)容
  }
 },
 methods： {
  ...mapMutations({
   changeIntroduceState: changeIntroduceState
  })
 }，
 beforeDestory: function(){
  if(!contentHasSave){
   // 使用element的提示框
   this.$confirm('您還未保存簡介，確定需要提出嗎?', '提示', {
    confirmButtonText: '確定',
    cancelButtonText: '取消',
    type: 'warning'
   }).then(() => {
    // 選擇確定，正常跳轉
   })
   .catch(() => {
    // 選擇取消
    this.changeIntroduceState(true)
   })
  }
 }
}
</script>

最后在router的beforeEach的導航守衛(wèi)里監(jiān)測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方法的執(zhí)行其實是在組件beforeDestory的方法之前執(zhí)行的，也就是說beforeEach執(zhí)行的時候introduceState的值根本沒有被更新為true。

正確的做法

后來自己去翻vue router的官方文檔，找到了一個絕妙的方法，那就是組件內(nèi)的導航守衛(wèi)。

const Foo = {
 template: `...`,
 beforeRouteEnter (to, from, next) {
  // 在渲染該組件的對應路由被 confirm 前調(diào)用
  // 不！能！獲取組件實例 `this`
  // 因為當守衛(wèi)執(zhí)行前，組件實例還沒被創(chuàng)建
 },
 beforeRouteUpdate (to, from, next) {
  // 在當前路由改變，但是該組件被復用時調(diào)用
  // 舉例來說，對于一個帶有動態(tài)參數(shù)的路徑 /foo/:id，在 /foo/1 和 /foo/2 之間跳轉的時候，
  // 由于會渲染同樣的 Foo 組件，因此組件實例會被復用。而這個鉤子就會在這個情況下被調(diào)用。
  // 可以訪問組件實例 `this`
 },
 beforeRouteLeave (to, from, next) {
  // 導航離開該組件的對應路由時調(diào)用
  // 可以訪問組件實例 `this`
 }
}

上面的描述很清楚，于是我就在組件的js代碼里加了一個beforeRouteLeave方法，然后彈出提示框，實現(xiàn)提示保存后退出的功能。

</script>
export default {
 data() {
  return {
   contentHasSave: false // 記錄用戶是否已經(jīng)保存內(nèi)容
  }
 },
  // 組件內(nèi)導航鉤子，處理未保存退出的情況
 beforeRouteLeave: function(to, from , next){
  if(this.buttonText === '提交'){
   next(false)
   this.$confirm('您還未保存簡介，確定需要提出嗎?', '提示', {
    confirmButtonText: '確定',
    cancelButtonText: '取消',
    type: 'warning'
   }).then(() => {
    // 選擇確定
    next()
   })
  }
 }
}
</script>

實現(xiàn)效果如下：