vue3 router-view transition 설정이 안되는데.. 이유를 잘 모르겠습니다.

Question

안녕하세요vue를 처음 공부하는데요 vue2를 안하고 vue3로 하다보니.. 인강을 따라해도 안되고 검색을 통해서 적용을 해봤지만.. 해결되지 않아서 도움을 요청하고자 질문드립니다.현재 저의 오류는 상단 메뉴를 누르면 RouterView에 내용을 Transition 기능을 적용하고 싶은데요.vue2 , vue3 api 문서대로 적용해도 slide , fade , page 등.. 다 적용되지 않고 있습니다..본문 내용은 정상적으로 불러오는데 Transition 효과가 안되고 있습니다..소스코드 및 vue 정보는 아래와 같습니다package.json "dependencies": { "axios": "^1.3.4", "core-js": "^3.8.3", "vue": "^3.2.13", "vue-router": "^4.0.13", "vue-template-compiler": "^2.7.14", "vuex": "^4.1.0" },routes : [ { path : '/news', // url 주소 component : NewsView, // url 주소로 갔을 때 표시될 컴포넌트 //meta: { transition: 'fade' }, }, { path : '/ask', component :AskView, meta: { transition: 'fade' }, }, { path : '/jobs', component : JobsView, //meta: { transition: 'slide-fade' }, }, ]app.vue

참고했던 링크 : https://router.vuejs.org/guide/advanced/transitions.htmlhttps://stackoverflow.com/questions/70848012/vue3-router-transitions-warningshttps://www.koderhq.com/tutorial/vue/component-animation/다들 좋은 하루 되세요.감사합니다

흑마법사 · Answer

App.vue 코드를 위와 같이 수정해 보세요!

하태연 · Answer

제가 설정하신 거 다 긁어다가 제가 작업해놓은 곳에 다 적용시켜봤는데 정상적으로 작동합니다. 😅음.. router-view쪽에 div로 한번 감싸서 테스트 해보세요.

동작되는 거 확인하시려면, 일단 아래 링크 가셔서 /asset/style.css 쪽에 작업하신 css내용 넣으시고, App.vue에서 route.path를 watch하여 transition.name을 설정해주는 부분 있는데 이 부분 변경해서 테스트 하시면 됩니다.https://codesandbox.io/s/vue3-radial-progress-example-p8i1nz?file=/src/main.js

vue3 router-view transition 설정이 안되는데.. 이유를 잘 모르겠습니다.

2개의 답변

#transition 목록