Vue 2 라이프사이클 - Destroy 전에 중지하는 방법?

Vue 2 라이프사이클 - Destroy 전에 중지하는 방법?

에 무언가를 추가할 수 있는가?beforeDestroy부품 파괴를 방지하기 위해?

아니면 부품 파괴를 막을 방법이 없을까?

내 경우는 스파 페이지를 부루트로 바꿀 때 먼저 감시 경로를 이용하지만, 구성 요소가 파괴되기 때문에 트리거되지 않는다는 것을 알았다.

벨민 베닥이 말했듯이 당신은 사용할 수 있다.keep-alive

• 사용할 때keep-alive두 개의 라이프사이클 훅이 더 작동하고 있다.activated그리고deactivated대신에 낚싯바늘을 걸다destroyed

• 의 목적keep-alive구성 요소를 캐슁하고 파괴하지 않음

• 사용할 수 있다include그리고exclude…의 특전.keep-alive요소 및 캐시 및 캐시에서 제외될 구성요소의 이름을 언급하십시오.문서화

• 캐시된 구성 요소라도 구성 요소를 미리 제거하려는 경우vm.$destroy() 여기에

더 멀리 당신은 할 수 있다.console.log모든 라이프사이클 후크에서 호출되는 라이프사이클 후크 확인

부에루트 네비게이션 가드를 사용할 수 있으니, 전화하면next(false)갈고리 안쪽에서 항법 수술은 중단될 겁니다

router.afterEach((to, from) => {
  if(your condition){
    next(false) //this will abort route navigation
  }
})

이 출처에 따르면: https://router.vuejs.org/guide/advanced/navigation-guards.html

나는 네가 Vue 라우터로 이와 같은 일을 할 것을 제안한다.

const router = new VueRouter({  }); // declare your router with params

router.beforeEach((to, from, next) => {
    if(yourCondition){
        next(false); // prevent user from navigating somewhere
    } else {
        return next(); // navigate to next "page" as usual
    }
});

이렇게 하면 선언된 조건에서 Vue 인스턴스가 파괴되는 것을 방지할 수 있으며 사용자가 다른 페이지로 이동하는 것도 방지할 수 있다.

@Vamsi Crishna "keep-alive" 대답을 이 문제를 해결하기 위한 적절한 "VueJS 방식"이라고 생각하겠지만, 나는 그것을 위해 내 코드의 일부를 리액터링할 마음이 없었다.

나 또한 Vue 라우터 내비게이션 가드를 "있는 그대로" 사용할 수 없었다. 왜냐하면,beforeRouterLeave, 비록 사용하지만next(false)루트가 계속되지 못하도록 막았고, Vue의 구성요소는 이미 파괴되었다.내가 구하지 못한 어떤 상태라도 잃게 될 것이고, 그것은 노선 변경 취소를 취소하려는 목적을 저버리게 될 것이다.

구성 요소의 형태/설정 상태가 남아 있어야 했기 때문에(구성 요소가 스스로 다시 로드되어 동일한 경로를 유지했음) 이것은 내가 원하는 것이 아니었다.

그래서 나는 여전히 항법 가드를 사용하면서도 구성요소 인메모리(in-memory)에 가지고 있는 어떠한 형태 변경/설정도 캐시하는 전략을 생각해 냈다.구성 요소에 RouteLep 후크를 추가하는 경우:

beforeRouteLeave (to, from, next) {
  if (!this.isFormDirty() || confirm('Discard changes made?')) {
    _cachedComponentData = null // delete the cached data
    next()
  } else {
    _cachedComponentData = this.componentData // store the cached data based on component data you are setting during use of the component
    next(false)
  }
}

Vue 구성 요소 외부에서 초기화함_cachedComponentData

<script>
let _cachedComponentData = null
module.exports = {
  ...component code here
}
<script>

그럼 다음엔created또는mountedI can't set the Cycle Hooks, I t setting the Life Cycle_cachedComponentData구성 요소의 "사용자가 중단한 위치"를 지정하려면:

...
if (_cachedComponentData) {
  this.componentData = _cachedComponentData
}
...

참조URL: https://stackoverflow.com/questions/43449747/vue-2-lifecycle-how-to-stop-beforedestroy