{"componentChunkName":"component---src-templates-blog-post-js","path":"/vue/vue-js-redirect-alias/","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":"aec6b88d-7da3-5d3e-8731-23c69295c910","excerpt":"Vue Js Redirect / Alias Redirect 리디렉션은 routes 에서 설정 할 수 있습니다. /user에서 /post…","html":"

\"Vue

\n

Redirect

\n

리디렉션은 routes 에서 설정 할 수 있습니다. /user에서 /post로 리디렉션하려면

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

리디렉션은 이름이 지정된 라우트를 지정할 수 있다.

\n

또는 아래 처럼 동적 리디렉션을 위한 함수를 사용할 수도 있다.

\n
const routes = [\n  ... code\n  {\n    path: \"{URL}\",\n    name: \"{라우터명}\",\n    component: () => import(\"{컴포넌트 경로}\"),\n    redirect: to => {\n      // 함수는 인수로 대상 라우트를 받는다.\n      // 여기서 path/location 반환한다.\n    }\n  },\n  ... code\n];
\n

구현 예시

\n
const routes = [\n  ... code\n  {\n    path: \"/coffee\",\n    name: \"Coffee\",\n    redirect: \"/about\",\n  },\n  ... code\n];
\n

coffee url 입력시 about 화면 으로 이동 (웹 브라우저 url 입력창에 domain.com/about 으로 표시됨)

\n

\"Vue

\n

\"Vue

\n

Alias

\n

리다이렉트는 사용자가 /user를 방문했을 때 URL이 /post로 대체 된 다음 /post로 매칭된다는 것을 의미합니다. 별칭은 /user의 별칭은 /post는 사용자가 /post를 방문했을 때 URL은 /post을 유지하지만 사용자가 /user를 방문한 것처럼 매칭하는것 이다. 아래 처럼 위 라우터를 구현 할수 있다.

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

구현 예시

\n
const routes = [\n  ... code\n  {\n    path: \"/coffee\",\n    name: \"Coffee\",\n    alias: \"/profile\",\n  },\n  ... code\n];
\n

profile url 입력시 coffee 화면이 보임 (웹 브라우저 url 입력창에 domain.com/profile 으로 표시됨)

\n

\"Vue

","tableOfContents":"","wordCount":{"words":119},"fields":{"slug":"/vue/vue-js-redirect-alias/","image":"/assets/vue-logo.png","faq":[]},"frontmatter":{"title":"Vue Js Redirect / Alias","date":"2021년 4월 4일","dateISO":"2021-04-04T15:11:34.709Z","updatedISO":null,"category":"vue","description":"리디렉션은 routes 에서 설정 할 수 있습니다. 별칭은 /user의 별칭은 /post는 사용자가 /post를 방문했을 때 URL은 /post을 유지하지만 사용자가 /user를 방문한 것처럼 매칭하는것 이다. 아래 처럼 위 라우터를 구현 할수 있다.","tags":["vue","javascript","framework","frontend","web","router","redirect","alias"]}}},"pageContext":{"slug":"/vue/vue-js-redirect-alias/","previous":{"fields":{"slug":"/vue/vue-js-네임드-라우트/"},"frontmatter":{"title":"Vue Js 뷰 네임드 라우트","tags":["vue","javascript","framework","frontend","web","router","named-routes"]}},"next":{"fields":{"slug":"/vue/vue-js-vuex의-개념-및-구조의-이해/"},"frontmatter":{"title":"Vue Js Vuex의 개념 및 구조의 이해","tags":["vue","javascript","framework","frontend","web","router"]}}}},"staticQueryHashes":["213619243","3262363727"]}