{"componentChunkName":"component---src-templates-blog-post-js","path":"/vue/vue-js-중첩-라우트/","result":{"data":{"site":{"siteMetadata":{"title":"Bottlehs Tech Blog","description":"웹·앱·AI 개발자 전병훈(bottlehs)의 기술 블로그. AI·LLM, JavaScript·Vue, Spring Boot, 알고리즘, 블록체인 실무 가이드를 다룹니다","siteUrl":"https://www.bottlehs.dev","author":{"name":"Jeon Byung Hun","summary":"개발을 즐기는 bottlehs - Engineer, MS, AI, FE, BE, OS, IOT, Blockchain, 설계, 테스트"},"social":{"github":"bottlehs","codepen":"bottlehs"}}},"markdownRemark":{"id":"83411977-988b-518c-bdd6-c477b5d8406c","excerpt":"Vue Js 뷰 중첩 라우트 뷰 중첩 라우트(Nested Routes) 실제 앱 UI는 일반적으로 여러 단계로 중첩 된 컴포넌트로 이루어져 있다. URL…","html":"

\"Vue

\n

뷰 중첩 라우트(Nested Routes)

\n

실제 앱 UI는 일반적으로 여러 단계로 중첩 된 컴포넌트로 이루어져 있다. URL의 세그먼트가 중첩 된 컴포넌트의 특정 구조와 일치한다는 것은 매우 일반적입니다. 예를 들면 다음과 같습니다.

\n
/user/foo/profile                     /user/foo/posts\n+------------------+                  +-----------------+\n| User             |                  | User            |\n| +--------------+ |                  | +-------------+ |\n| | Profile      | |  +------------>  | | Posts       | |\n| |              | |                  | |             | |\n| +--------------+ |                  | +-------------+ |\n+------------------+                  +-----------------+
\n

라우터 컴포넌트 안에 하위에 라우터 컴포넌트를 중첩하여 구성하는 방식 이라 생각 하면 된다.

\n

구현 예시

\n
src\n│── components // 컴포넌트\n│   ├── Profile.vue // Profile 컴포넌트\n│   └── Posts.vue // Posts 컴포넌트\n├── router // 라우팅\n│── views // 화면\n│   └── User.vue // User 컴포넌트\n│── main.js // 메인 (뷰인스턴스 초기화)\n└── App.vue // App 컴포넌트
\n

App.vue

\n
<router-view>
\n

router/index.js

\n
const routes = [\n  ... code\n  {\n    path: \"{URL 경로}/:id\",\n    name: \"{라우터명}\",\n    component: () => import(\"{컴포넌트 경로}\"),\n    children: [\n      {\n        path: '{URL 경로}',\n        component: () => import(\"{컴포넌트 경로}\"),\n      },\n      {\n        path: '{URL 경로}',\n        component: () => import(\"{컴포넌트 경로}\"),\n      }\n    ]\n  },\n  ... code\n];
\n

\"Vue

","tableOfContents":"","wordCount":{"words":60},"fields":{"slug":"/vue/vue-js-중첩-라우트/","image":"/assets/vue-logo.png","faq":[]},"frontmatter":{"title":"Vue Js 뷰 중첩 라우트","date":"2021년 4월 4일","dateISO":"2021-04-04T11:11:34.709Z","updatedISO":null,"category":"vue","description":"라우터 컴포넌트 안에 하위에 라우터 컴포넌트를 중첩하여 구성하는 방식이 중첩 라우트 이다.","tags":["vue","javascript","framework","frontend","web","router","nested-routes"]}}},"pageContext":{"slug":"/vue/vue-js-중첩-라우트/","previous":{"fields":{"slug":"/vue/vue-js-router-설치-및-설정/"},"frontmatter":{"title":"Vue JS Router 설치 및 설정","tags":["vue","javascript","framework","frontend","web","router"]}},"next":{"fields":{"slug":"/algorithm/그리디-알고리즘-greedy-algorithm/"},"frontmatter":{"title":"그리디 알고리즘 (Greedy Algorithm)","tags":["그리디 알고리즘","Greedy","Algorithm","알고리즘","JavaScript"]}}}},"staticQueryHashes":["213619243","3262363727"]}