{"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":"3c229672-f01d-5bc8-a2ba-e2e354e6a0fe","excerpt":"Vue Js 동적 라우트 뷰 동적 라우트(Dynamic Route Matching) 주어진 패턴을 가진 라우트를 동일한 컴포넌트에 매핑해야하는 경우가 있다. 예를 들어 게시물 상세보기에 대해 동일한 레이아웃을 가지지만 하지만 다른 게시물 ID로 렌더링되어야하는 Post…","html":"

\"Vue

\n

뷰 동적 라우트(Dynamic Route Matching)

\n

주어진 패턴을 가진 라우트를 동일한 컴포넌트에 매핑해야하는 경우가 있다. 예를 들어 게시물 상세보기에 대해 동일한 레이아웃을 가지지만 하지만 다른 게시물 ID로 렌더링되어야하는 Post 컴포넌트가 있을 수 있다. vue-router에서 경로에서 동적 세그먼트를 사용하여 아래와 같이 할 수 동적으로 라우트를 매칭하여 세그먼트를 같은 레이아웃에 다른 게시물을 보여줄수 있다.

\n

구현 예시

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

App.vue

\n
<router-link to=\"/post/10\">Post 10</router-link>\n<router-link to=\"/post/11\">Post 11</router-link>\n<router-link to=\"/post/12\">Post 12</router-link>
\n

router/index.js

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

views/Post.vue

\n
<template>\n  <div class=\"post\">{{ $route.params.id }}</div>\n</template>\n\n<script>\n  export default {\n    name: \"Post\",\n    components: {},\n  }\n</script>
\n

\"Vue

","tableOfContents":"","wordCount":{"words":70},"fields":{"slug":"/vue/vue-js-동적-라우트/","image":"/assets/vue-logo.png","faq":[]},"frontmatter":{"title":"Vue Js 동적 라우트","date":"2021년 4월 4일","dateISO":"2021-04-04T13:11:34.709Z","updatedISO":null,"category":"vue","description":"주어진 패턴을 가진 라우트를 동일한 컴포넌트에 매핑해야하는 경우가 있다. 예를 들어 게시물 상세보기에 대해 동일한 레이아웃을 가지지만 하지만 다른 게시물 ID로 렌더링되어야하는 Post 컴포넌트가 있을 수 있다. vue-router에서 경로에서 동적 세그먼트를 사용하여 아래와 같이 할 수 동적으로 라우트를 매칭하여 세그먼트를 같은 레이아웃에 다른 게시물을 보여줄수 있다.","tags":["vue","javascript","framework","frontend","web","router","dynamic-route-matching"]}}},"pageContext":{"slug":"/vue/vue-js-동적-라우트/","previous":{"fields":{"slug":"/algorithm/그리디-알고리즘-greedy-algorithm/"},"frontmatter":{"title":"그리디 알고리즘 (Greedy Algorithm)","tags":["그리디 알고리즘","Greedy","Algorithm","알고리즘","JavaScript"]}},"next":{"fields":{"slug":"/vue/vue-js-redirect-alias/"},"frontmatter":{"title":"Vue Js Redirect / Alias","tags":["vue","javascript","framework","frontend","web","router","redirect","alias"]}}}},"staticQueryHashes":["213619243","3262363727"]}