라우터10

• 

  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의 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.

• 

  VueRouter의 Programmatic Navivation 파헤치기 router.push(...)이전까지 우리는 를 이용한 탐색 방법을 사용했습니다.하지만, javascript에서도 window.loacation이 있듯이 프로그래밍 방식으로 페이지를 탐색 할 수 있습니다.한번 비교해볼까요??선언 방식프로그래밍 방식router.push(...)그럼 한번 어떻게 자유분방하게 사용할 수 있는지 예시를 보면서 생각해 보도록 합시다.// String routerouter.push('/users/james')// route(path)를 나타낸 Objectrouter.push({ path: '/usersjames' })// parameter가 존재하는 이름을 가진 routerouter.push({ name: 'user', parmas: { username: 'james' } })//.. FrameWorks/Vue 2024. 6. 23.

• 

  VueRouter의 Nested Route 파헤치기 Nested Route(중첩된 라우트)이전 게시글에서 우리는 를 사용해 보았습니다.Vue Router에서는 route를 중첩해서 사용 할 수 있습니다.이게 무슨말이냐??Vue를 공부하면서 부모-자식 관계를 지겹도록 들었을 겁니다.맞습니다. 도 부모-자식 처럼 사용하는 것이죠.음... 일종의 을 상상해 보시죠.우리는 컴포넌트를 삽입하는 거지만, 얼추 그런 느낌이란 뜻입니다. 다른 겁니다.예시를 보면서 이해해 보도록 합시다. 몇가지 컴포넌트를 만들어 봅시다./user/johnny/profile /user/johnny/posts ┌──────────────────┐ ┌──────────────────┐│ User │ .. FrameWorks/Vue 2024. 6. 23.

• 

  VueRouter의 Named Route 파헤치기 Naming Route우리는 route를 설정할 때 선택적으로 name을 지정할 수 있습니다.const routes = [ { path: '/user/:username', name: 'profile', component: User, }]위에처럼 name을 지정해주면 를 사용시에 to속성에 path정보를 넣지 않고 name을 명시해서 사용할 수 있습니다. 사용자 프로필 name을 이용한 routing은 여러가지 이점이 있습니다.하드코딩된 URL이 없음params의 자동 인코딩URL 오타 방지경로 순위를 우회하여, 같은 경로와 일치하는 하위 순위 라우트를 표시name은 중복될 수 없습니다.같은 name을 사용하는 route가 존재하면 에러를 발생시키죠.Vue .. FrameWorks/Vue 2024. 6. 23.

• 

  VueRouter의 Route Matching Grammar 파헤치기 parameter에 커스텀 정규식 사용parameter에 커스텀 정규식을 이용하여 사용할 수 있습니다.숫자만 표시하게 한다던지, 뒤에 추가로 붙는 URL을 허용해야하는 경우에 사용할 수 있죠.다음은 일반적인 route를 사용하는 방법입니다.const route = [ { path: '/order/:orderId'}, { path: '/product/:productName'},]하지만 정적섹션 /order or /product를 사용하고 싶지 않을 수 있습니다.만약 :orderId에서는 숫자만, :productName에는 무엇이든 가능하다면 정규식으로 해당 문제를 해결 할 수 있습니다.const route = [ // /:orderId -> 숫자만 매치됨 { path: '/:order.. FrameWorks/Vue 2024. 6. 21.