중첩된 경로로 작업하는 것은 상당히 번거로울 수 있습니다...



따라서 라우팅 구성을 깨끗하게 유지하고 중첩된 경로 작업을 쉽게 하는 방법에 대한 결론을 내렸습니다.

일반적으로 Vue 라우터로 작업하는 방법에 대한 몇 가지 자습서가 이미 있지만 이 특정 문제와 주변 아키텍처에 집중하고 싶습니다.

아래 예제 리포지토리 생성 과정을 안내하고 이 문제를 어떻게 해결했는지 보여드리겠습니다.

주요 이슈

주요 문제는 경로를 중첩하려는 경우 상위 경로 구성 요소가 항상 <router-view></router-view> 를 포함해야 한다는 것입니다. 이것은 때때로 매우 성가실 수 있으며 제 생각에는 옳지 않다고 생각합니다. 또한 이는 구성 요소 자체와 해당 하위 경로/라우팅 사이의 높은 결합으로 이어집니다.

1단계: EmptyRouterView 구성 요소 추가

처음에는 EmptyRouterView 를 포함하는 <router-view></router-view> 구성 요소를 만듭니다.

<template>
  <router-view></router-view>
</template>

그것은 거의 모든 마법입니다. 이제 경로 구성에서 이 구성 요소를 올바르게 사용하기만 하면 됩니다.

2단계: 새 아키텍처에 맞게 구성 요소 조정

경로 구성으로 이동합니다(아마도 router.js )

현재 구성은 다음과 같을 것입니다.

// Old Config
  {
      path: '/my-route',
      component: MyRouteView,
      name: 'route',
      children: [...]
  }

다음과 같이 변경해 보겠습니다.

// New Config
 {
      path: '/my-route',
      component: EmptyRouterView,
      children: [{
        name: 'route',
        path: '',
        component: MyRouteView
      }]
  }

EmptyRouterView를 구성 요소로 사용하여 일종의 추상 경로를 선언합니다. 이제 기본 하위 구성 요소로 이전 경로 구성을 추가하지만 경로는 비어 있습니다. 빈 경로는 사용자가 /my-route 로 이동할 때 이 하위 경로로 연결되어 렌더링됩니다.

또한 추상 부모 경로에 이름을 지정하지 않은 것을 알 수 있습니다. 애플리케이션에 링크를 추가하고 경로를 이름으로 참조할 때 실수로 빈 부모 경로를 렌더링하지 않기 때문에 이것은 또한 도움이 됩니다.

3단계: 경로 중첩

이제 경로를 쉽게 중첩할 수 있습니다.

// Nested Config
 {
      path: '/my-route',
      component: EmptyRouterView,
      children: [{
        name: 'route',
        path: '',
        component: MyRouteView
      }, {
        name: 'route.child-one'
        path: 'child-one',
        component: ChildOneView
      }, {
        name: 'route.child-two'
        path: 'child-two',
        component: ChildTwoView
      }]
  }

경로 중첩이 얼마나 쉬운지 확인하세요 💪🏻 사용자가 /my-route/child-one로 이동하면 ChildOneView가 의도한 대로 렌더링되어야 합니다.

4단계: 깊은 중첩 경로

중첩 경로에 경로를 중첩할 수도 있습니다. 일종의 경로 인식



(네 알아요: 나쁜 말장난 😁)

// Deep Nested Config
 {
      path: '/my-route',
      component: EmptyRouterView,
      children: [{
        name: 'route',
        path: '',
        component: MyRouteView
      }, {
        path: 'sub',
        component: EmptyRouterView,
        children: [{
            name: 'deep',
            path: '',
            component: MyDeepRouteView
          }, {
            name: 'deep.child-one'
            path: 'deep-one',
            component: ChildOneView
          }, {
            name: 'route.child-two'
            path: 'deep-two',
            component: ChildTwoView
          }]
      }]
  }

경로/my-route/sub/deep-one는 ChildOneView가 렌더링되도록 합니다.

루트라는 단어의 한계에 도달한 것 같아서 이만 남깁니다. 이 모든 것을 실제로 볼 수 있는 저장소에 압축했습니다.

베르니비트만 / vue-router-architecture

Vue 라우터에 대한 나의 아키텍처 접근 방식

My Vue 라우터 아키텍처 접근 방식

이 리포지토리는 Vue 라우터 아키텍처 및 중첩 경로에 대한 기본 접근 방식을 보여줍니다. 또한 Vue 라우터로 대화를 처리할 수 있는 가능성을 표시합니다.EmptyRouterView라는 보기(라우터 보기와 대화에 대한 보기만 포함)를 사용하여 내 중첩된 라우팅 구성을 구성하는 깔끔한 방법과 대화를 처리하는 쉬운 방법을 달성했습니다.

The corresponding Blog Post can be found on

프로젝트 설정

npm install

개발을 위한 컴파일 및 핫 리로드

npm run serve

❓ 질문이 있으신가요?

주저하지 말고 [email protected]으로 이메일을 보내주세요.


View on GitHub

짧은 스포일러: 모달

Vue 라우터 아키텍처에 대한 이 작은 시리즈의 다음 부분에서는 Vue 라우터로 모달을 처리하는 방법에 대해 이야기하고 싶습니다. 위에서 설명한 접근 방식에는 또 다른 이점이 있습니다. 대화 상자(이 팝업/모달, 무엇을 불러야 할지 모르겠습니다 🙄)를 다루기가 매우 쉽습니다. 여기에서 2부 찾기:

Vue 라우터로 대화 처리

베른하르트 비트만 ・ 2019년 4월 17일 ・ 2분 읽기

#vue #tutorial #javascript #programming

이 주제에 대해 100가지의 다양한 접근 방식이 있을 수 있다는 것을 알고 있으며 이에 대한 귀하의 생각을 듣고 싶습니다 😉 그리고 항상 그렇듯이 질문이 있으시면 주저하지 말고 질문하십시오