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"해야 합니다. 정적 및 동적 소품에 대해 자세히 알아보세요. p>

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

으아아아

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

으아아아

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