vue-router에 의해 페이지가 다시 열리면 VueJS 후크 마운트()가 호출되지 않음

vue-router에 의해 페이지가 다시 열리면 VueJS 후크 마운트()가 호출되지 않음

제발, 아래 플럭스를 봐주세요, 제 문제를 보여주고 있어요.vue-router를 사용하고 있습니다.this.$router.push참조할 수 있습니다.페이지A부터 시작할게요

• 페이지 A -> 페이지 B (mounted()호출된 페이지 B)

• 페이지 B -> 페이지 A (페이지 A로 돌아가기)

• 페이지 A -> 페이지 B (mounted()호출되지 않음)

페이지(.vue component)가 닫히지 않고 캐시 또는 기타 정보로 유지되고 있는 것 같습니다.를 사용해야 합니다.mounted()페이지를 열고 닫을 때마다 캐시에서 정리할 수 있습니다.어떻게 하면 해결할 수 있을까요?

vue컴포넌트를 재사용할 수 있었습니다.이것은 예상되고 있습니다.
일반적으로 루트 변경을 감시하고 그에 따라 컴포넌트 상태를 업데이트합니다.

루트 변경에 대응하려면 다음 명령을 사용합니다.

const Example = Vue.extend({
  template: `
  	<div>
  		<p>This changes: '{{param}}'</p>
    </div>`,
  data(){
    return {
      param: this.$route.params.param
    };
  },
  beforeRouteUpdate(to, from, next) {
    this.param = to.params.param;
    next();
  }
});

const router = new VueRouter({
  routes: [
    {
      path: '/:param', component: Example,
    }
  ]
})
const app = new Vue({ router }).$mount('#app')

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<div id="app">
  <router-link to="/foo">foo</router-link><br>
  <router-link to="/bar">bar</router-link><br>
  <router-view></router-view>
</div>

또는 루트를 감시하고 그에 따라 상태를 갱신할 수도 있습니다.

Vue.extend({
  watch: {
    '$route'() {
      // TODO: react to navigation event.
      // params cotains the current route parameters
      console.log(this.$route.params);
    }
  },
  // ....
});

그vue-router문서에는 데이터 가져오기 - Vue 라우터라는 몇 가지 좋은 예가 있습니다.

계속 사용하시려면mounted(), 당신은 그것을 할 수 있습니다.router-view루트가 변경되었을 때 변경되는 키. 예를 들어 다음과 같습니다.

<router-view :key="$route.fullPath"></router-view>

이렇게 하면 컴포넌트가 매번 다시 작성되기 때문에 퍼포먼스 저하가 발생합니다.가능하다면 위에서 설명한 루트 훅을 사용하는 것을 권장합니다.

Vue 3

저처럼 마운트 해제되지 않는 이유를 알고 계신 분은 경로가 변경되었을 때 페이지 내의 컴포넌트에 문의해 주십시오.다음은 가이드라인을 제시하겠습니다.

컴포넌트 A를 사용하는 페이지A와 컴포넌트 A를 사용하지 않는 페이지B가 있다고 합니다.

페이지 A를 처음 열면 컴포넌트 A에는 올바르게 마운트된 메서드가 호출됩니다.

단, 페이지 B로 이동하면 Vue3는 컴포넌트 A를 마운트 해제하거나 파기하지 않고 비활성화하며 비활성화된 메서드가 마운트 해제되지 않고 호출됩니다.

페이지 A로 돌아가면 컴포넌트 A가 다시 활성화되고 메서드 활성화가 마운트 대신 호출됩니다.

Vue 3용 Composition API를 사용하는 사용자:

이 사용 사례는 컴포넌트 마운트 및 기타 종속성에 대해 API에서 데이터를 가져오기 위한 것입니다.대신watch를 사용하여 의존관계를 자동으로 추적하고 마운트에서 부작용을 수행해야 합니다.

watchEffect(fetchData);

watch(dependencies, callback)이 루트를 처음 방문했을 때 트리거됩니다.그러나 다른 페이지로 이동한 후 다시 돌아오면 초기 상태가 업데이트로 계산되지 않기 때문에 다시 트리거되지 않습니다.또한 종속성은 기술적으로 마운트 시점과 변경되지 않았습니다.

기타 주의사항:

• 리액트에서 오신 분들은watch와는 완전히 동등하지 않다useEffect.watchEffect더 비슷해요.

• 비교를 위해 이 코드는 다음 코드와 동일한 결과를 가져야 합니다.watchEffect하나. 하지만.watchEffect더 간결합니다.

onMounted(fetchData);
watch([dependency 1, dependency 2, ...], fetchData);

언급URL : https://stackoverflow.com/questions/57699473/vuejs-hook-mounted-is-not-called-when-page-is-re-open-by-vue-router