VueRouter6

• 

  VueRouter의 Dynamic Routing 파헤치기 Adding routes동적 라우팅 에서는 주로 두가지의 메서드로 인해 동작하게 됩니다.router.addRoute()router.removeRoute()새 경로만 등록하기 때문에, 페이지 이동시에는 router.push() 또는 router.replace()메서드를 사용해야 합니다.const router = coreateRouter({ history: createWebHistory(), routes: [{ path: '/:articleName', component: Article}],}) 위와 같은 경우 /about, /store, /3-twinkle 등 모든 라우트가 Article 컴포넌트를 렌더링 할 것입니다. 이제 새로운 /about이란 라우트를 추가해 보겠습니다.router.addRo.. FrameWorks/Vue 2024. 8. 3.

• 

  VueRouter의 Lazy Loading Routes 파헤치기 Lazy Loading Routes라우트를 설정하는데 import xxx from 'xxx를 사용하여 임포트해서 사용합니다.하지만, 이 경우 컴포넌트의 수에 따라 엄청난 지연이 발생할 수 있습니다. 그러면 어떻게 해결 할 수 있을까요? 우리는 import하는 함수를 이용하여 이를 해결할 수 있습니다.아래 코드를 이용해서 말이죠.const UserDetail = () => import('./UserDetail.vue')const router = createRouter({ //... routes: [ { path: '/users/:id', component: UserDetail }, // 위 아래 모두 같은 기능을 합니다. { path: '/users/:id'.. FrameWorks/Vue 2024. 8. 3.

• 

  VueRouter의 Scroll Behavior 파헤치기 Scroll Behavior보통의 브라우저라면 페이지 이동시에 항상 페이지의 최상단으로 이동하는 것을 경험해 본적이 있을겁니다.하지만, 안타깝게도 Vue에서는 이 기능이 default가 아닌데요...우리가 이 문제를 해결하기 위해 사용할 수 있는 것이 scrollBehavior입니다. 선언 위치를 보실까요??const router = createRouter({ history: createWebHistory(), routes: [...], scrollBehavior (to, from, savePosition) { // return desired position }}) 위에서 인자로 사용되는 to와 from은 Navigation Guards과 유사합니다. 세번째 인자인 sa.. FrameWorks/Vue 2024. 8. 3.

• 

  VueRouter의 Transitions 파헤치기 Transition앞전에 [[RouterView Slot]] 에서 배운 transition을 좀 더 활용하는 방법을 알아보겠습니다.route의 meta태그를 이용하여 동적으로 을 컨트롤 할 수 있습니다. 동작 방식이나 방법은 앞서 배웠기에 자세한 설명은 생략하고 예시를 보겠습니다.이전 글을 안보고 오셨다면 [[RouterView Slot]]을 먼저 보고 보시는걸 추천합니다.const routes = [ { path: '/custom-transition', component: PanelLeft, meta: { transition: 'slide-left' }, }, { path: '/other-transition', compone.. FrameWorks/Vue 2024. 8. 3.

• 

  VueRouter의 RouterView Slot 파헤치기 RouterView slot에 v-slot을 사용하여 특정 컴포넌트를 유연하게 조작할 수 있습니다.  위의 코드는 평소에 사용하는 코드와 동일하게 동작합니다.위의 코드를 활용해서 유연하게 조작하는 것이지요. 살펴보도록 할까요??KeepAlive태그 안에 를 넣어 사용하는 방법입니다.태그로 감싸면 해당 컴포넌트는 리렌더링 하지 않겠다는 뜻입니다. 그럼 리렌더링을 하지 않으면 어떻게 될까요?? 만약 데이터를 변경시키고 다른 컴포넌트로 이동 후 다시 돌아왔을 대 데이터가 유지되어 있을 겁니다. 아래와 같이 사용합니다. Transition태그 안에 를 넣어 사용하는 방법입니다.태그로 감싸 하위의 컨텐츠에 트랜지션 or 애니메이션을 넣을 .. FrameWorks/Vue 2024. 7. 29.

• 

  VueRouter의 Composition API 파헤치기 Composition APIVue가 Version2에서 Version3가 되면서 가장 큰 변화는 setup하는 과정이라고 할 수 있습니다.기존의 방식을 Options라고하며, 현재 등장한 방법을 Composition이라고 합니다.하지만, 아직 우리는 Options API를 사용할 수 있습니다. route 객체는 동적인(반응형) 객체입니다. 때문에 대부분의 경우 route 객체를 감시하는 것을 지양해야 합니다. 대신에 변경이 예상되는 하위 속성을 감시할 수 있습니다.Navigation Guard이전에 우리는 beforeRouteLeave와 beforeRouteUpdate에 대해 학습했습니다.Composition API에서는 Vue Router update와 leave를 다음과 같이 사용합니다. Compos.. FrameWorks/Vue 2024. 7. 29.