Router18

• 

  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의 Data Fetching 파헤치기 데이터 가져오기때때로 경로가 활성화될 때 서버에서 데이터를 가져와야하는 경우가 발생 할 수 있습니다.탐색 후 데이터를 가져오거나, 탐색 전 데이터를 가져오거나 할 수 있습니다.탐색 후 데이터 가져오기이 접근 방식은 즉시 들어오는 컴포넌트를 탐색하고 렌더링하며, 컴포넌트 자체에서 데이터를 가져오게 됩니다.이는 네트워크를 통해 데이터를 가져오는 동안 로딩 상태를 표시할 수 있으며, 각 뷰에 대해 로딩을 다르게 처리할 수 있습니다. 로딩 중... {{ error }} {{ post.title }} {{ post.body }} 탐색 전 데이터 가져오기beforeRouteEnter를 통해 컴포넌트가 렌더링되기.. FrameWorks/Vue 2024. 6. 27.

• 

  VueRouter의 Router Meta Field 파헤치기 route's meta field라우트에 meta라는 속성 객체를 사용하여 임의의 정보를 추가하면, route location과 navigation guard에서 접근할 수 있습니다.const routes = [ { path: '/posts', component: PostsLayout, children: [ { path: 'new', component: PostsNew, // only authenticated users can create posts meta: { requiresAuth: true }, }, .. FrameWorks/Vue 2024. 6. 27.

• 

  VueRouter의 Navigation Guard 파헤치기 네비게이션 가드주로 탐색을 리다이렉션 or 취소하여 탐색을 막는데 사용하게 됩니다.가드를 연결하는 방법은 다양한데 다음 세 가지 종류가 있습니다.전역라우트별컴포넌트 내부BeforeGuardBeforeGurad는 탐색 이전에 실행되게 됩니다.router Instance의 beforeEach()메서드에 콜백 함수를 전달하여 등록합니다.콜백함수에서 사용하는 parameter에는 다음과 같은 종류가 있습니다.to : 탐색 될 라우트 위치 객체from : 탐색 전 현재 라우트 위치 객체만약 라우트 작업을 취소하고 싶을 경우엔 return false로 취소 할 수 있습니다.또한, return { name: ${route_name} }을 통해 리다이렉션를 명시할 수 있습니다.router.beforeEach(async.. FrameWorks/Vue 2024. 6. 27.

• 

  VueRouter의 Diffrenet History Modes 파헤치기 다양한 히스토리 모드Vue Router Instance에는 생성할 때, history 옵션을 사용하여 다양한 히스토리 모드 중 하나를 선택해서 적용할 수 있습니다.Hash ModecreateWebHashHistory()를 사용하여 설정합니다.https://example.com/#/user/id와 같은 모습 내부적으로 사용하는 URL 앞에 해시 문자(#)를 사용합니다.URL의 이 섹션은 서버로 전달되지 않으므로 특별한 조치가 필요하지 않으나, SEO에 나쁜 영향을 미치므로 이것이 문제가 된다면 HTML5 모드를 사용해야 합니다.import { createRouter, createWebHashHistory } from 'vue-router'const router = creatgeRouter({ hist.. FrameWorks/Vue 2024. 6. 26.

• 

  VueRouter의 Active Links 파헤치기 황성 링크활성 링크란 현재 활성화된 링크를 지칭하는 뜻입니다.RouterLink 컴포넌트는 활성 링크에 router-link-active 및 router-link-exact-active 두가지 CSS 클래스를 추가합니다.따라서, 활성된 링크에 맞게 특정 CSS를 활성화 시킬 수 있는 것이죠. 그럼 활성화된 링크란 무엇일까요?? 예를 들어보겠습니다.아래와 같이 route와 RouterLink가 작성되어 있는 상황입니다.const routes = [ { path: '/uesrs/:username', component: User, children: [ { path: 'grade/:number' .. FrameWorks/Vue 2024. 6. 23.

• 

  VueRouter의 Route Component Props 파헤치기 라우트 컴포넌트에 Props 전달하기이전에 route를 통해 props를 꺼내는 방법을 사용했습니다. 아래처럼 말이죠. User {{ $route.params.id }} import User from './User.vue'cosnt router = createRouter({ history: createWebHistory(), routes: [ { path: '/user/:id', component: User, }, ],}) 하지만, User.vue에서 $route에 대한 직접적인 의존성을 제거하기 위해 props를 선언할 수 있습니다. User {{ id }} .. FrameWorks/Vue 2024. 6. 23.

• 

  VueRouter의 Redirection & Alias 파헤치기 Redirection리다이렉션은 route 설정 시 정의할 수도 있습니다.예를 들어 /home에서 /로 리다이렉션을 시켜보겠습니다.// String으로 작성한 리다이렉션const routes = [{ path: '/home', redirect: '/' }]// 이름이 있는 라우토로 설정한 리다이렉션const routes = [{ path: '/home', redirect: { name: 'homepage' } }]// 함수를 사용한 동적 리다이렉션const routes = [ { // /search/screens -> /search?q=screens path: '/search/:searchText' redirect: to => { return.. FrameWorks/Vue 2024. 6. 23.

• 

  VueRouter의 Named View 파헤치기 이름이 있는 뷰때로는 여러 뷰(view)를 중첩하지 않고 동시에 표현해야 할 때가 있습니다.이름이 지정되지 않은 는 기본값으로 default를 가지게 됩니다.하지만, 우리는 에 name속성을 활용하여 원하는 컴포넌트를 추가해 고정시킬 수 있습니다.const router = createRouter({ history: createWebHashHistory(), routes: [ { path: '/', components: { default: Home, // 두 컴포넌트를 ``의 `name` 속성에 매치 시킴 // key: value로 선언하지 않았지만 `LeftSid.. FrameWorks/Vue 2024. 6. 23.