這篇文章給大家分享的是有關(guān)vue如何實(shí)現(xiàn)提示保存后退出的方法的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。

創(chuàng)新互聯(lián)公司是一家以網(wǎng)絡(luò)技術(shù)公司，為中小企業(yè)提供網(wǎng)站維護(hù)、網(wǎng)站建設(shè)、做網(wǎng)站、網(wǎng)站備案、服務(wù)器租用、國(guó)際域名空間、軟件開發(fā)、微信平臺(tái)小程序開發(fā)等企業(yè)互聯(lián)網(wǎng)相關(guān)業(yè)務(wù)，是一家有著豐富的互聯(lián)網(wǎng)運(yùn)營(yíng)推廣經(jīng)驗(yàn)的科技公司，有著多年的網(wǎng)站建站經(jīng)驗(yàn)，致力于幫助中小企業(yè)在互聯(lián)網(wǎng)讓打出自已的品牌和口碑，讓企業(yè)在互聯(lián)網(wǎng)上打開一個(gè)面向全國(guó)乃至全球的業(yè)務(wù)窗口：建站歡迎聯(lián)系：18982081108

為什么要使用Vue

Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以創(chuàng)建可維護(hù)性和可測(cè)試性更強(qiáng)的代碼庫(kù)，Vue允許可以將一個(gè)網(wǎng)頁(yè)分割成可復(fù)用的組件，每個(gè)組件都包含屬于自己的HTML、CSS、JavaScript，以用來渲染網(wǎng)頁(yè)中相應(yīng)的地方，所以越來越多的前端開發(fā)者使用vue。

嘗試的錯(cuò)誤做法

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

首先在vuex中新增一個(gè)狀態(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
  }
 }
})

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

如果內(nèi)容尚未保存，我們就彈出一個(gè)提示框，當(dāng)用戶選擇取消的時(shí)候，就將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('您還未保存簡(jiǎn)介，確定需要提出嗎?', '提示', {
    confirmButtonText: '確定',
    cancelButtonText: '取消',
    type: 'warning'
   }).then(() => {
    // 選擇確定，正常跳轉(zhuǎn)
   })
   .catch(() => {
    // 選擇取消
    this.changeIntroduceState(true)
   })
  }
 }
}
</script>

最后在router的beforeEach的導(dǎo)航守衛(wèi)里監(jiān)測(cè)from為當(dāng)前頁(yè)面的所有路由跳轉(zhuǎn)。當(dāng)state的introduceState為true的時(shí)候使用next(false)來取消本次路由跳轉(zhuǎn)

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) => {
 // 簡(jiǎn)介也未提交，取消跳轉(zhuǎn)
 if(from.fullPath === '/adwords/introduce' && store.state.introduceState === 'not-save'){
  next(false)
 }
})
export default router

這種做法其實(shí)是行不通的，因?yàn)閎eforeEach方法的執(zhí)行其實(shí)是在組件beforeDestory的方法之前執(zhí)行的，也就是說beforeEach執(zhí)行的時(shí)候introduceState的值根本沒有被更新為true。

正確的做法

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

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

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

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

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

感謝各位的閱讀！關(guān)于“vue如何實(shí)現(xiàn)提示保存后退出的方法”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

網(wǎng)站欄目：vue如何實(shí)現(xiàn)提示保存后退出的方法
URL鏈接：http://jinyejixie.com/article24/ppeece.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供做網(wǎng)站、網(wǎng)站設(shè)計(jì)公司、App設(shè)計(jì)、電子商務(wù)、域名注冊(cè)、軟件開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)