{"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":"dffe567a-ae3c-575e-b141-04f5d88ed64c","excerpt":"Vue Js 뷰 네임드 라우트 뷰 네임드 라우트(Named Routes) 라우트에 연결하거나 탐색을 수행 할 때 이름이 있는 라우트를 사용할수 있다. 사용 법은 routes 에 name…","html":"

\"Vue

\n

뷰 네임드 라우트(Named Routes)

\n

라우트에 연결하거나 탐색을 수행 할 때 이름이 있는 라우트를 사용할수 있다. 사용 법은 routes 에 name 옵션을 지정 하면 된다. 라우트 관리가 편리 하다 라는 장점이 있다. 예를 들어 아래와 같이 생각해 보도록 하자.

\n

아래와 같은 라우터가 있고, 뷰 여러 컴포넌트에 <router-link to=\"/user/1\">User 1</router-link> 와 같이 라우터 이름을 사용하지 않고 url 을 입력하여 관리 한다고 가정 했을때 만약 user/1 에서 user/profile/1 로 라우터가 변경 되어야 한다면 모든 컴포넌트 url 을 일일이 변경해 줘야할것 이다. 그런데 이러한 부분을 네임드 라우트 를 활용 하면 쉽게 변경이 가능하다.

\n

user/1 user/2 user/3

\n

네임드 라우트 사용에 따른 예시

\n

user/1

\n
const routes = [\n  ... code\n  {\n    path: \"user/:id\",\n    name: \"User\",\n    component: () => import(\"User.vue\"),\n  },\n  ... code\n];
\n
<router-link to=\"/user/1\">User 1</router-link>
\n
<router-link :to=\"{ name: 'user', params: { id: '1' } }\">User 1</router-link>
\n

user/profile/1

\n
const routes = [\n  ... code\n  {\n    path: \"user/profile/:id\",\n    name: \"User\",\n    component: () => import(\"User.vue\"),\n  },\n  ... code\n];
\n
<router-link to=\"/user/profile/1\">User 1</router-link>
\n
<router-link :to=\"{name:\"user\", params : { id : 1 }}\">User 1</router-link>
\n

차이를 보면 url 이 변경 되었을때 네임드 라우트를 사용 했을 경우 route 인스턴스만 수정해 주면 되는걸 확인할수 있다.\\

\n

\"Vue

\n

구현 예시는 중첩 라우터와 동일 하기 때문에 생략 하도록 하겠다.

\n

추가로 “네임드 뷰 (Named View)” 라는 개념이 있는데 이부분은 각자 REST API 를 활용한 CRUD 개발 과정에서 다루도록 하겠다.

","tableOfContents":"","wordCount":{"words":158},"fields":{"slug":"/vue/vue-js-네임드-라우트/","image":"/assets/vue-logo.png","faq":[]},"frontmatter":{"title":"Vue Js 뷰 네임드 라우트","date":"2021년 4월 4일","dateISO":"2021-04-04T15:11:34.709Z","updatedISO":null,"category":"vue","description":"라우트에 연결하거나 탐색을 수행 할 때 이름이 있는 라우트를 사용할수 있다. 사용 법은 routes 에 name 옵션을 지정 하면 된다. 라우트 관리가 편리 하다 라는 장점이 있다.","tags":["vue","javascript","framework","frontend","web","router","named-routes"]}}},"pageContext":{"slug":"/vue/vue-js-네임드-라우트/","previous":{"fields":{"slug":"/vue/vue-js-히스토리-관리/"},"frontmatter":{"title":"Vue Js 히스토리 관리","tags":["vue","javascript","framework","frontend","web","router"]}},"next":{"fields":{"slug":"/vue/vue-js-vuex의-개념-및-구조의-이해/"},"frontmatter":{"title":"Vue Js Vuex의 개념 및 구조의 이해","tags":["vue","javascript","framework","frontend","web","router"]}}}},"staticQueryHashes":["213619243","3262363727"]}