Route Leave 이전 Vue 라우터가 하위 구성 요소를 중지하지 않음

Route Leave 이전 Vue 라우터가 하위 구성 요소를 중지하지 않음

간단한 질문이 있습니다.루트가 변경되었을 때 서브 컴포넌트를 취소하고 싶을 뿐입니다.여기 샘플이 있습니다.부모인 홈 컴포넌트가 있습니다.그리고 하위 구성요소가 있습니다.마운트된 하위 구성 요소의 경로 변경 시 간격 기능을 중지하고 싶을 뿐입니다.

import Home from "./components/Home.vue";
import Another from "./components/Another.vue";
const routes = [
    { path: '', component: Home },
    { path: '/another', component: Another }
];
const router = new VueRouter({
    routes
});
const app = new Vue({
    router

}).$mount('#app');

이건 가정용 부품입니다.Home.vue

<template>
  <sub-component></sub-component>
</template>
<script type="text/babel">
    import SubComponent from "./components/Subcomponent.vue";
    export default {
       components:{
          'sub-component':SubComponent
       }
    }
</script>

그리고 이건 서브 컴포넌트입니다서브 컴포넌트표시하다

<template>
   <div> Sub component will run a interval </div>
</template>
<script type="text/babel">
    import SubComponent from "./components/Subcomponent.vue";
    export default {
       components:{
          'sub-component':SubComponent
       },
       mounted:function(){
           setInterval(function(){
             console.log("I should cancel when route changed");
           },1000)
       }
    }
</script>

Route Leave 메서드 전에 시도했지만 Home만 정지됩니다.vue 메서드

서브컴포넌트(루트컴포넌트 내부)를 사용하고 있기 때문에beforeRouteLeave직접적으로.

서브 컴포넌트는 루트의 하위 컴포넌트입니다.따라서 다음 가이드 페이지에서 설명한 바와 같이 Child Component Refs를 사용하여 루트컴포넌트에서 자녀 컴포넌트의 종료 방법을 트리거해야 합니다.

https://vuejs.org/v2/guide/components.html#Child-Component-Refs

다음과 같이 하위 구성요소에 대한 참조를 생성할 수 있습니다.

<sub-component ref="mySubComponent"></sub-component>

루트 컴포넌트에서 다음 작업을 수행할 수 있습니다.

beforeRouteLeave: function(to, from, next) {
    // Indicate to the SubComponent that we are leaving the route
    this.$refs.mySubComponent.prepareToExit();
    // Make sure to always call the next function, otherwise the hook will never be resolved
    // Ref: https://router.vuejs.org/en/advanced/navigation-guards.html
    next();
}

주의: 루트 컴포넌트가 하위 컴포넌트의 메서드를 호출합니다.prepareToExit()이 예에서는, 다음과 같이 청소를 실시할 수 있습니다.

methods: {
    prepareToExit: function() {
        console.log("Preparing to exit sub component, stopping 'twoSecondsTimerEvents'")
        clearInterval(this.twoSecondsTimerEvents)
    }
}

다음으로 작업 예를 제시하겠습니다.https://jsfiddle.net/mani04/crwuxez3/ (콘솔에 기록된 모든 상세 정보)

주의:이 예에서는 Vue 2.1.10 및 Vue-Router 2.2.0(현재 최신 버전)을 사용합니다.이전 버전에서는 내비게이션 가드 기능과 관련된 몇 가지 문제가 있었는데, 이제 완전히 해결되었습니다.

편집: 대체 방법

위의 솔루션을 게시한 후 보다 간단한 방법이 있다는 것을 알게 되었습니다.서브 컴포넌트는 다음과 같은 루트 고유의 콜백을 얻지 못할 수 있습니다.beforeRouteLeave단, 컴포넌트 라이프 사이클을 따르는 Vue 컴포넌트입니다.

그래서, 그 구성 요소 라이프 사이클 도표에 기초할 것이다.beforeDestroy서브 컴포넌트 내의 콜백이 표시됩니다.

그 방법은 다음과 같습니다.

const SubComponent = Vue.component('sub-component', {
    template: `...`,
    data: function() {...},
    mounted: function() {...},
    // 'prepareToExit' method not required here
    // And also there is no need to handle 'beforeRouteLeave' in parent
    beforeDestroy: function() {
        console.log("Stopping the interval timer")
        clearInterval(this.twoSecondsTimerEvents)
    }
});

장점:

1. 이전의 접근 방식보다 훨씬 단순합니다.
2. 상위 구성 요소에서 하위 구성 요소 참조를 처리할 필요가 없습니다.
3. 상위 구성 요소에서 정리 방법을 트리거할 필요가 없습니다.

단점은 없습니다만, 행선지 루트에 근거해 다른 액션을 실행할 필요가 있기 때문에, 이 트리거는 루트 변경과 정확하게 관련되지 않습니다.이게 더 좋으시다면 이걸 사용하셔도 됩니다.

언급URL : https://stackoverflow.com/questions/42045433/vue-router-beforerouteleave-doesnt-stop-subcomponents