vue-router 구성 요소와 관련된 재사용 문제는 무엇입니까?

이 글은 주로 Vue-Router 컴포넌트 재사용 문제에 대한 자세한 설명을 소개하고 참고용으로 올려드립니다.

컴포넌트 시스템은 Vue의 중요한 부분입니다. 복잡한 페이지 추상화를 작고 독립적이며 재사용 가능한 여러 컴포넌트로 분해하고, 각 컴포넌트를 vue-router의 라우팅 기능과 결합할 수 있습니다. 구성 요소는 해당 경로에 매핑되고 Vue는 경로 변경을 통해 구성 요소를 렌더링할 위치를 알려주므로 구성 요소와 페이지 간 이동이 가능합니다.

문제

vue-router를 사용하여 경로를 전환하면 구성 요소 트리의 업데이트가 트리거되고 정의된 경로를 기반으로 새 구성 요소 트리가 렌더링됩니다. 일반적인 전환 프로세스는 다음과 같습니다.

1. 비활성화 및 제거 필수 구성 요소

2. 전환 가능성 확인

3. 업데이트되지 않은 구성 요소 재사용

4. 새 구성 요소 활성화 및 활성화

구체적인 라우팅 전환 제어 프로세스는 공식 문서를 참조하세요. : 스위칭 제어 파이프라인

vue-router는 구성 요소의 재사용 가능 여부를 어떻게 결정합니까? 다음 라우팅 구성을 살펴보겠습니다.

{
  path: 'post/:postId',
  name: 'post',
  component: resolve => require(['./components/Post.vue'],resolve)
}

기사 ID를 통해 해당 기사 페이지를 로드하는 경로입니다. 처음 액세스하면 Post.vue 컴포넌트가 마운트될 때 컴포넌트 트리로 렌더링됩니다. , 기사 ID를 통해 구성요소가 설치되고 기사 내용을 페이지에 표시합니다. 다른 기사에 액세스하면 라우팅 매개변수 postId가 변경되지만 새 기사의 내용이 표시됩니다. 그것은 역효과를 낳는다.

우리가 보는 것은 여전히 ​​이전 기사입니다. 라우팅 매개변수가 변경되었지만 vue-router는 이 구성 요소가 이전에 렌더링되었으므로 이전 구성 요소를 직접 재사용한다고 생각합니다. 탑재와 같은 수명주기 기능을 포함하여 구성 요소에서 어떠한 작업도 수행하지 않습니다.

그래서 우리가 최종적으로 보는 것은 원본 구성 요소의 내용입니다.

그렇다면 어떻게 원하는 효과를 얻을 수 있을까요? 효과적인 솔루션은 아래에 소개되어 있습니다

솔루션

감시 수신기를 사용하여 라우팅 변경 사항을 모니터링하고 라우팅 매개 변수의 변경 사항에 따라 해당 데이터에 응답할 수 있습니다. 구체적인 구현 프로세스는 다음과 같습니다.

데이터 수집을 정의합니다. method

먼저 기사를 획득하는 방법을 정의하고, 기사 ID를 기반으로 백그라운드에서 해당 기사 정보를 획득합니다.

methods: {
  getPost(postId) {
    this.$http.get(`/post/get_post/${postId}`).then((response) => {
      if(response.data.code === 0){
        this.post = response.data.post;
      }
    });
  }
}

경로 듣기

다음 단계는 경로가 전환될 때 대상 구성 요소가 Post.vue 구성 요소인지 확인하는 것입니다. 그렇다면 정의된 경로 이름 이름을 기반으로 구현할 수 있습니다. 구성 요소 콘텐츠를 업데이트하려면 라우팅 정보에서 대상 기사 ID를 가져옵니다.

watch: {
  '$route' (to, from) {
    if(to.name === 'post'){
      this.getPost(to.params.postId);
    }
  }
}

컴포넌트 초기화

컴포넌트가 컴포넌트 트리에 처음 마운트되면 라우팅 모니터링이 유효하지 않다는 점에 유의해야 합니다. 이때 라이프사이클에서 컴포넌트를 초기화해야 합니다. Hook Mounted:

mounted() {
  this.getPost(this.$route.params.postId);
}

위 내용은 제가 모든 사람을 위해 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

JavaScript에서 다각형 중심을 계산하는 방법

WeChat 애플릿에서 스위치 선택기를 사용하는 방법

Angular 오류 404 문제에 대한 자세한 해석

WeChat 애플릿에서 슬라이더 사용 방법 component

vue

AngularJS 중요 버전 업데이트

WeChat 애플릿에서 진행률 구성 요소를 사용하는 방법

위 내용은 vue-router 구성 요소와 관련된 재사용 문제는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!