Vue 전환이 라우터 링크 및 $router.push에서 작동하지 않습니다.

Question

다음 App.vue 파일이 있습니다:

으아악

다음 라우터 파일:

으아악

앱을 실행하고 $router.push("/dashboard") 또는 router-link(to ="/dashboard" active-class="active")를 사용하여 링크를 클릭할 때. 다른 많은 질문과 튜토리얼을 확인했지만 불행히도 여전히 작동하지 않습니다. 왜 전환이 일어나지 않는지 아시나요?

Answer 1

변경:

으아악

to

으아악

전환은 뷰의 변경 사항을 감지하지 못하므로 변경할 수 있는 항목을 제공해야 합니다. 또한 fade는 CSS의 실제 애니메이션이어야 한다는 점을 기억하세요. 예:

으아악

Answer 2

코드에서 일부 항목을 변경할 수 있습니다.

우선 선언할 필요가 없습니다 RouterView 的导入，因为它是 全球注册。只要您的项目中安装了 vue-router，您就可以直接在模板上安全地使用 RouterView 或 router-view.

둘째, name 属性更改为静态属性。编写 :name="fade" 意味着您将变量 fade 的值传递给 name。根据您的代码，我假设 fade 不是变量而是字符串，这意味着您需要将 prop 更改为 name="fade"해야 합니다. 정적 및 동적 소품에 대해 자세히 알아보세요.

마지막으로 전환에는 CSS를 사용해야 합니다. 이름이 지정된 변환을 선언하므로 다음 CSS를 추가해야 합니다.

으아아아

CSS의 fade 的使用。这是 name 속성에 제공된 값에 주의하세요. 이는 다음을 의미합니다.

으아아아

그러면 CSS에는 .slide-in-enter-active、.slide-in-enter-leave 등이 있어야 합니다.