새 라우터 페이지의 구성 요소는 전체 페이지를 수동으로 새로 고친 후에만 로드됩니다.

Question

새 경로를 추가하고 새 경로로 전환하는 애니메이션을 추가했습니다.

버튼을 클릭하면 새 경로(/first)를 푸시하는 다음 코드를 추가했습니다.

으아악

이제 문제는 버튼을 클릭하고 "onClickTransition" 메소드를 호출하면 라우터는 잘 푸시되는 것 같은데 페이지가 비어 있다는 것입니다. Ctrl+R을 눌러 페이지를 수동으로 새로 고칠 때만 구성 요소가 렌더링됩니다.

애니메이션 삽입으로 인해 문제가 발생한 것 같은데 수동으로 페이지를 새로 고치면 애니메이션이 제대로 작동합니다. 그래서 문제가 무엇인지 모르겠습니다. 귀하의 도움에 매우 감사하겠습니다.

app.vue의 나머지 코드는 다음과 같습니다.

으아악

index.js의 코드 부분:

으아악

"onClickTransition" 메서드는 기본 경로 "MainPage.vue"의 하위 구성 요소인 "PreStartPage.vue" 구성 요소에서 유래합니다.

"PreStartPage.vue"에서 "다음" 버튼을 클릭하면 this.$emit."MainPage.vue"를 사용하여 "MainPage.vue"에 이벤트를 보낸 다음 "onClickNext1"이라는 메서드를 사용하여 이벤트를 수신합니다. , 다른 this.$emit을 통해 "App.vue"에 신호를 보냅니다. 여기서 App.vue에 표시된 "@clickedNext1"이 나옵니다.

다음은 "PreStartPage.vue"의 코드입니다:

으아악

이것은 "MainPage.vue"의 코드입니다:

/* From the Template */
<router-view @clickedNext1="onClickTransition" v-slot="{ Component }">
    <transition name="route1" mode="out-in">
      <component :is="Component"></component>
    </transition>
  </router-view>

/* From the Script */
 methods: {
    onClickTransition() {
      this.$router.push("/first");
    },

Answer 1

다음과 같이 코드를 수정해 보세요.

으아아아

$route.fullPath에 설정된 "key" 속성은 경로가 변경될 때마다 변환이 올바르게 수행되도록 보장해야 합니다.

편집

이 문제를 해결하려면 전환 구성 요소에 ":enter-active-class" 및 ":leave-active-class" 속성을 추가하면 전환 중에 요소에 적용되어야 하는 클래스를 지정할 수 있습니다. .

App.vue 구성 요소에서 다음과 같이 변환 구성 요소를 업데이트할 수 있습니다.

으아아아

이렇게 하면 전환 중에 요소에 올바른 클래스가 적용되고 애니메이션이 시작되기 전에 구성 요소가 완전히 렌더링됩니다.

자세한 내용을 보려면 공식 위키를 방문하시기 바랍니다: https://vuejs.org/guide/built-ins/transition.html#css-based-transitions