vue 알림 저장 후 종료 하 는 방법

이러한 수요 가 있다 고 가정 하면 사용 자 는 한 페이지 에서 문 자 를 편집 하지만 저장 을 클릭 하지 않 고 다음 경로 로 이동 합 니 다.좋 은 방법 은"편집 한 내용 이 저장 되 지 않 았 습 니 다.종료 하 시 겠 습 니까?"라 는 힌트 를 드 리 는 것 입 니 다.사용자 가'확인'을 누 르 면 현재 내용 을 저장 하지 않 고 종료 합 니 다.사용자 가'취소'를 누 르 면 이번 경로 전환 을 취소 하고 원래 페이지 에 계속 남 습 니 다.
시도 한 잘못된 방법
처음에 저 는 vuex 를 vue router 와 결합 한 beforeech 네 비게 이 션 수 비 를 이용 하여 이 루어 지 려 고 했 습 니 다.코드 는 다음 과 같 습 니 다:
우선 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 의 beforeach 내 비게 이 션 수위 에서 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

이 방법 은 사실 통 하지 않 습 니 다.beforeech 방법의 실행 은 구성 요소 beforeDestory 의 방법 전에 실 행 된 것 이기 때 문 입 니 다.즉,beforeech 가 실 행 될 때 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 코드 에 beforeRoute Leave 방법 을 추가 한 다음 에 알림 상 자 를 꺼 내 서 알림 저장 후 종료 하 는 기능 을 실현 했다.

</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 가 힌트 를 실현 하여 저장 한 후에 종료 하 는 방법 은 바로 편집장 이 여러분 에 게 공유 한 모든 내용 입 니 다.여러분 에 게 참고 가 되 고 저희 도 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.