From 65ca7b30e057731cbc49eb0dd41b31d6d8264df7 Mon Sep 17 00:00:00 2001 From: "Jisung, Ahn" Date: Fri, 11 Jun 2021 07:42:47 +0000 Subject: [PATCH 01/44] Translate index.md via GitLocalize --- docs/ko/index.md | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) create mode 100644 docs/ko/index.md diff --git a/docs/ko/index.md b/docs/ko/index.md new file mode 100644 index 000000000..9387b4ac8 --- /dev/null +++ b/docs/ko/index.md @@ -0,0 +1,24 @@ +--- +home: 'true' +heroImage: "/logo.png" +actionText: 시작하기 → +actionLink: "/installation.html" +features: + - title: "\U0001F6E3 Expressive route syntax" + details: 직관적이고 강력한 구문으로 정적 및 동적 경로를 정의합니다. + - title: "\U0001F6D1 세분화 된 탐색 제어" + details: Intercept any navigation and precisely control its outcome. + - title: "\U0001F9F1 컴포넌트 기반 구성" + details: 표시해야하는 구성 요소에 각 경로를 매핑합니다. + - title: "\U0001F50C 히스토리 모드" + details: HTML5, 해시 또는 메모리 히스토리 모드 중에서 선택합니다. + - title: "\U0001F39A 스크롤 제어" + details: 모든 페이지에서 스크롤 위치를 정확하게 제어합니다. + - title: "\U0001F310 자동 인코딩" + details: 코드에 유니 코드 문자 (你好)를 직접 사용합니다. +footer: MIT Licensed | Copyright © 2014-present Evan You, Eduardo San Martin Morote +--- + + + +<script setup> import HomeSponsors from './.vitepress/components/HomeSponsors.vue' </script> From 09dcaa060c394cb7b4efd4b6dc623d6d57daa5c4 Mon Sep 17 00:00:00 2001 From: "Jisung, Ahn" Date: Fri, 11 Jun 2021 07:46:03 +0000 Subject: [PATCH 02/44] Translate installation.md via GitLocalize --- docs/ko/installation.md | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) create mode 100644 docs/ko/installation.md diff --git a/docs/ko/installation.md b/docs/ko/installation.md new file mode 100644 index 000000000..82c8938e0 --- /dev/null +++ b/docs/ko/installation.md @@ -0,0 +1,23 @@ +# 설치 + +## 직접 다운로드 하기 / CDN + +[https://unpkg.com/vue-router@4](https://unpkg.com/vue-router@4) + + + +[Unpkg.com](https://unpkg.com) 은 npm 기반 CDN 링크를 제공합니다. 위의 링크는 항상 npm의 최신 릴리스를 가리 킵니다. `https://unpkg.com/vue-router@4.0.5/dist/vue-router.global.js` 와 같은 URL을 통해 특정 버전 / 태그를 사용할 수도 있습니다. + + + +## npm + +```bash +npm install vue-router@4 +``` + +## yarn + +```bash +yarn add vue-router@4 +``` From f93060091adaf1583486cfdd9d46ca92611a8eab Mon Sep 17 00:00:00 2001 From: zero86 Date: Tue, 15 Jun 2021 01:21:52 +0000 Subject: [PATCH 03/44] Translate introduction.md via GitLocalize --- docs/ko/introduction.md | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) create mode 100644 docs/ko/introduction.md diff --git a/docs/ko/introduction.md b/docs/ko/introduction.md new file mode 100644 index 000000000..bc2e488ff --- /dev/null +++ b/docs/ko/introduction.md @@ -0,0 +1,20 @@ +# 소개 + +Vue Router 는 [Vue.js](http://v3.vuejs.org) 를 위한 공식 라우터 입니다. Vue.js 코어와 긴밀하게 통합되어 단일 페이지 애플리케이션(SPA)을 쉽게 구축할 수 있습니다.
기능은 다음과 같습니다. + +- 중첩 라우트 맵핑(Nested routes mapping) +- 동적 라우팅(Dynamic Routing) +- 모듈식, 컴포넌트 기반 라우트 구성(Modular, component-based router configuration) +- 라우트 매개변수, 쿼리, 와일드카드(Route params, query, wildcards) +- Vue.js 의 트랜지션 시스템에서 제공되는 뷰 트랜지션 효과(View transition effects powered by Vue.js' transition system) +- 세밀한 네비게이션 제어(Fine-grained navigation control) +- 자동 활성 CSS 클래스와의 링크(Links with automatic active CSS classes) +- HTML5 히스토리 또는 해시 모드(HTML5 history mode or hash mode) +- 사용자 정의 가능한 스크롤 동작(Customizable Scroll Behavior) +- URL 에 대한 올바른 인코딩(Proper encoding for URLs) + +[시작하기](./guide/) 또는 [playground](https://github.com/vuejs/vue-router-next/tree/master/playground) 에서 시작해보세요.([`README.md`](https://github.com/vuejs/vue-router-next) 참고). + + + +<script setup> import HomeSponsors from './.vitepress/components/HomeSponsors.vue' </script> From 70eff986cc3c6df451adc7278de091563d4e28d0 Mon Sep 17 00:00:00 2001 From: zero86 Date: Fri, 2 Jul 2021 15:14:19 +0000 Subject: [PATCH 04/44] Translate dynamic-matching.md via GitLocalize --- docs/ko/guide/essentials/dynamic-matching.md | 116 +++++++++++++++++++ 1 file changed, 116 insertions(+) create mode 100644 docs/ko/guide/essentials/dynamic-matching.md diff --git a/docs/ko/guide/essentials/dynamic-matching.md b/docs/ko/guide/essentials/dynamic-matching.md new file mode 100644 index 000000000..4efc5602a --- /dev/null +++ b/docs/ko/guide/essentials/dynamic-matching.md @@ -0,0 +1,116 @@ +# 매개변수(Params)를 활용한 동적 라우트 매칭(Dynamic Route Matching) + + + +매우 자주 주어진 패턴의 경로를 동일한 컴포넌트에 매핑해야합니다. 예를 들어 모든 사용자에 대해 렌더링되어야하지만 사용자 ID가 다른 `User` 컴포넌트가 있을 수 있습니다. Vue Router 에서는 이를 달성하기 위해 경로의 동적 세그먼트를 사용할 수 있으며 이를 *param* 이라고합니다. + +```js +const User = { + template: '
User
', +} + +// 이것은 `createRouter` 로 전달됩니다. +const routes = [ + // 동적 세그먼트는 콜론(:)으로 시작합니다. + { path: '/users/:id', component: User }, +] +``` + +이제 `/users/johnny` 및 `/users/jolyne` 과 같은 URL 은 모두 동일한 경로에 매핑됩니다. + +*param* 은(는) 콜론 `:` (으)로 표시됩니다. 경로가 일치하면 해당 *params* 의 값이 모든 컴포넌트에서 `this.$route.params` 로 노출됩니다. 따라서 `User` 의 템플릿을 다음과 같이 업데이트하여 현재 사용자 ID를 렌더링 할 수 있습니다. + +```js +const User = { + template: '
User {{ $route.params.id }}
', +} +``` + +동일한 경로에 여러 *params* 가 있을 수 있으며 `$route.params` 의 해당 필드에 매핑됩니다.
예 : + +pattern | matched path | $route.params +--- | --- | --- +/users/:username | /users/eduardo | `{ username: 'eduardo' }` +/users/:username/posts/:postId | /users/eduardo/posts/123 | `{ username: 'eduardo', postId: '123' }` + +`$route.params` 외에도 `$route` 객체는 `$route.query` 와 같은 기타 유용한 정보도 노출합니다.(URL 에 query 가 있는 경우) `$route.hash` 기타 등 [API Reference](../../api/#routelocationnormalized) 에서 자세한 내용을 확인할 수 있습니다. + +이 예제의 작동 데모는 [여기](https://codesandbox.io/s/route-params-vue-router-examples-mlb14?from-embed&initialpath=%2Fusers%2Feduardo%2Fposts%2F1) 에서 찾을 수 있습니다. + + + +## 매개변수(Params) 변경에 대한 반응 + + + +매개 변수(params)와 함께 경로를 사용할 때 주의해야 할 점은 사용자가 `/users/johnny` 에서 `/users/jolyne ` 으로 이동 할 때 ** 동일한 컴포넌트 인스턴스가 재사용 된다는 것입니다. **두 경로 모두 동일한 컴포넌트를 렌더링하므로 이전 인스턴스를 삭제 한 다음 새 인스턴스를 만드는 것보다 더 효율적입니다. **그러나 이는 컴포넌트 수명주기 훅(hook)이 호출되지 않음을 의미하기도 합니다.** + +동일한 컴포넌트의 매개 변수(params) 변경에 대응하려면 `$route` 객체를 감시합니다. 이 시나리오에서는 `$route.params` 의 모든 항목을 관찰하면됩니다. + +```js +const User = { + template: '...', + created() { + this.$watch( + () => this.$route.params, + (toParams, previousParams) => { + // 라우트 변경에 대응... + } + ) + }, +} +``` + +또는 `beforeRouteUpdate`, [navigation guard](../advanced/navigation-guards.md) 를 사용하여 탐색을 취소 할 수도 있습니다. + +```js +const User = { + template: '...', + async beforeRouteUpdate(to, from) { + // 라우트 변경에 대응... + this.userData = await fetchUser(to.params.id) + }, +} +``` + +## 모두 캐치(Catch all) / 404 Not fount Route + + + +일반 매개 변수(params)는 `/` 로 구분된 URL 조각 사이의 문자만 일치합니다. **무엇이든** 일치 시키려면 *param* 바로 뒤에 괄호 안에 정규식을 추가하여 맞춤 *param* 정규식을 사용할 수 있습니다. + +```js +const routes = [ + // 모든 것을 일치시키고`$ route.params.pathMatch` 아래에 넣습니다. + { path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound }, + // `/ user-`로 시작하는 모든 항목과 일치하고`$ route.params.afterUser` 아래에 배치합니다. + { path: '/user-:afterUser(.*)', component: UserGeneric }, +] +``` + +이 특정 시나리오에서는 괄호 사이에 [커스텀 정규식(custom regexp)](./route-matching-syntax.md#custom-regexp-in-params) 을 사용하고 `pathMatch` 매개 변수를 [선택적으로 반복 가능(optionally repeatable)](./route-matching-syntax.md#optional-parameters) 으로 표시합니다. 이를 통해 필요한 경우 `path` 를 배열로 분할하여 경로로 직접 이동할 수 있습니다. + +```js +this.$router.push({ + name: 'NotFound', + // 현재 경로를 유지하고 `//` 로 시작하는 대상 URL 을 피하기 위해 첫 번째 문자를 제거 + params: { pathMatch: this.$route.path.substring(1).split('/') }, + // 기존 쿼리 및 해시(있는 경우) 유지 + query: this.$route.query, + hash: this.$route.hash, +}) +``` + +[반복 매개변수(repeated params)](./route-matching-syntax.md#repeatable-params) 부분에서 자세히 알아보세요. + +[History mode](./history-mode.md) 를 사용하는 경우 지침에 따라 서버도 올바르게 구성해야합니다. + +## 고급 매칭 패턴 + +Vue Router 는 `express` 에서 사용하는 것에서 영감을 얻은 자체 경로 일치 구문을 사용하므로 선택적 매개 변수, 0 개 이상 또는 하나 이상의 요구 사항, 심지어 사용자 정의 정규식 패턴과 같은 많은 고급 매칭 패턴을 지원합니다. [고급 매칭(Advanced Matching)](./route-matching-syntax.md) 문서를 확인하여 살펴보세요. From 5f61430a7ae9814757e640829782b136855b5e04 Mon Sep 17 00:00:00 2001 From: zero86 Date: Fri, 2 Jul 2021 15:14:30 +0000 Subject: [PATCH 05/44] Translate index.md via GitLocalize --- docs/ko/guide/index.md | 93 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 93 insertions(+) create mode 100644 docs/ko/guide/index.md diff --git a/docs/ko/guide/index.md b/docs/ko/guide/index.md new file mode 100644 index 000000000..13eb04ed3 --- /dev/null +++ b/docs/ko/guide/index.md @@ -0,0 +1,93 @@ +# 시작하기 + +Vue + Vue Router 를 사용하여 싱글 페이지 애플리케이션(SPA)을 만드는 것은 자연스러운 일입니다. Vue.js 를 사용하여 애플리케이션을 이미 컴포넌트로 구성하고 있습니다. Vue Router 를 애플리케이션에 추가할 때, 우리는 컴포넌트를 경로에 매핑하고 Vue Router 에게 렌더링할 위치를 알려주기만 하면 됩니다.
다음은 기본적인 예입니다. + +## HTML + +```html + + + +
+

Hello App!

+

+ + + + Go to Home + Go to About +

+ + + +
+``` + +### `router-link` + +일반 `a` 태그를 사용하는 대신 커스텀 컴포넌트 `router-link` 를 사용하여 링크를 만드는 방법에 유의하세요. 이를 통해 Vue Router 는 페이지를 다시 로드(reloading)하지 않고 URL 을 변경하고 URL 생성 및 인코딩을 처리 할 수 ​​있습니다. 나중에 이러한 기능을 활용하는 방법을 살펴 보겠습니다. + +### `router-view` + +`router-view` 는 URL 에 일치하는 컴포넌트를 표시합니다. 레이아웃에 맞게 어디에나 배치 할 수 있습니다. + +## JavaScript + +```js +// 1. 라우트 컴포넌트 정의(Define route components) +// These can be imported from other files +const Home = { template: '
Home
' } +const About = { template: '
About
' } + +// 2. 경로 정의(Define some routes) +// 각 경로는 컴포넌트에 매핑되어야 합니다. +// 나중에 중첩된 경로(nested routes)에 대해 이야기하겠습니다. +const routes = [ + { path: '/', component: Home }, + { path: '/about', component: About }, +] + +// 3. 라우터 인스턴스(router instance)를 생성하고 'routes' 옵션을 전달합니다. +// 추가 옵션 전달도 가능하나, 여기서는 단순하게 살펴보겠습니다. +const router = VueRouter.createRouter({ + // 4. 사용할 기록(history) 구현을 제공합니다. 여기서는 단순성을 위해 해시 기록(hash history)을 사용합니다. + history: VueRouter.createWebHashHistory(), + routes, // `routes: routes` 의 줄임 +}) + +// 5. 루트 인스턴스(root instance)를 생성하고 마운트 +const app = Vue.createApp({}) +// 애플리케이션 API 인 use() 를 사용하여 라우터 인스턴스를 전달하여 전체 앱이 라우터를 인식하도록 합니다. +app.use(router) + +app.mount('#app') + +// 앱이 시작되었습니다! +``` + +`app.use(router)` 를 호출하면 `this.$router ` 로 접근할 수 있으며 현재 경로는 `this.$route` 로 접근할 수 있습니다.
모든 컴포넌트 내부 : + +```js +// Home.vue +export default { + computed: { + username() { + // 잠시 후 'params' 가 무엇인지 알아보겠습니다. + return this.$route.params.username + }, + }, + methods: { + goToDashboard() { + if (isAuthenticated) { + this.$router.push('/dashboard') + } else { + this.$router.push('/login') + } + }, + }, +} +``` + +라우터 또는 `setup` 함수 내의 경로에 접근하려면 `useRouter` 또는 `useRoute` 함수를 호출하세요. 이에 대해서는 [Composition API](./advanced/composition-api.md#accessing-the-router-and-current-route-inside-setup) 에서 자세히 알아볼 것입니다. + +문서 전반에 걸쳐 `router` 인스턴스를 자주 사용합니다. `this.$router`는 `createRouter` 를 통해 생성된 `router` 인스턴스를 직접 사용하는 것과 동일합니다. `this.$router` 를 사용하는 이유는 라우팅 조작이 필요한 모든 단일 컴포넌트에서 라우터를 가져 오지 않기 때문입니다. From 080e3e38812c1b4b517f0fdf4d88e2423c82484a Mon Sep 17 00:00:00 2001 From: "Jisung, Ahn" Date: Fri, 2 Jul 2021 15:27:42 +0000 Subject: [PATCH 06/44] Translate history-mode.md via GitLocalize --- docs/ko/guide/essentials/history-mode.md | 183 +++++++++++++++++++++++ 1 file changed, 183 insertions(+) create mode 100644 docs/ko/guide/essentials/history-mode.md diff --git a/docs/ko/guide/essentials/history-mode.md b/docs/ko/guide/essentials/history-mode.md new file mode 100644 index 000000000..b1332fcb2 --- /dev/null +++ b/docs/ko/guide/essentials/history-mode.md @@ -0,0 +1,183 @@ +# 다양한 히스토리 모드 + + + +`history` 옵션을 사용하면 다른 히스토리 모드 중에서 선택할 수 있습니다. + +## 해시 모드 + +해시 히스토리 모드는 `createWebHashHistory()` 를 이용해 만듭니다. + +```js +import { createRouter, createWebHashHistory } from 'vue-router' + +const router = createRouter({ + history: createWebHashHistory(), + routes: [ + //... + ], +}) +``` + +내부적으로 전달되는 실제 URL 앞에 해시 문자 ( `#`) 이 URL 섹션은 서버로 전송되지 않기 때문에 서버 수준에서 특별한 처리가 필요하지 않습니다. **그러나 이렇게 하면 SEO에 나쁜 영향을 미칩니다** . 검색엔진최적화가 걱정된다면 HTML5 히스토리 모드를 사용하세요. + +## HTML5 Mode + +HTML5 모드는 `createWebHistory()`를 이용해 만듭니다. 이 모드가 추천되는 모드입니다. + +```js +import { createRouter, createWebHistory } from 'vue-router' + +const router = createRouter({ + history: createWebHistory(), + routes: [ + //... + ], +}) +``` + +히스토리 모드를 사용할 때 URL은 `https://example.com/user/id` 와 같이 "정상"으로 보입니다. 멋지죠! + +하지만 여기에 문제가 있습니다. 우리 앱은 적절한 서버 구성이없는 단일 페이지 클라이언트 측 앱이므로 사용자가 브라우저에서 `https://example.com/user/id` 을 입력하여 접속하면 404페이지를 보게 됩니다. + +걱정하지 마세요. 문제를 해결하려면 서버에 간단한 포괄 대체 경로를 추가하기 만하면됩니다. URL이 정적 리소스와 일치하지 않는 경우 `index.html` 페이지를 제공하면 됩니다. 멋지조! + +## 서버 구성 예제 + +**참고** : 다음 예제에서는 루트 폴더에서 앱을 제공한다고 가정합니다. 하위 폴더에 배포하는 경우 [Vue CLI의 `publicPath`](https://cli.vuejs.org/config/#publicpath) 옵션과 라우터의 관련 [`base` 속성을](../../api/#createwebhistory) 사용해야합니다. 또한 루트 폴더 대신 하위 폴더를 사용하려면 아래 예제를 조정해야합니다 (예 : `RewriteBase /` 를 `RewriteBase /name-of-your-subfolder/` 대체). + +### Apache + +```apacheconf + + RewriteEngine On + RewriteBase / + RewriteRule ^index\.html$ - [L] + RewriteCond %{REQUEST_FILENAME} !-f + RewriteCond %{REQUEST_FILENAME} !-d + RewriteRule . /index.html [L] + +``` + +`mod_rewrite` 대신 [`FallbackResource`](https://httpd.apache.org/docs/2.2/mod/mod_dir.html#fallbackresource) 를 사용할 수도 있습니다. + +### nginx + +```nginx +location / { + try_files $uri $uri/ /index.html; +} +``` + +### Native Node.js + +```js +const http = require('http') +const fs = require('fs') +const httpPort = 80 + +http + .createServer((req, res) => { + fs.readFile('index.html', 'utf-8', (err, content) => { + if (err) { + console.log('We cannot open "index.html" file.') + } + + res.writeHead(200, { + 'Content-Type': 'text/html; charset=utf-8', + }) + + res.end(content) + }) + }) + .listen(httpPort, () => { + console.log('Server listening on: http://localhost:%s', httpPort) + }) +``` + +### Express with Node.js + +Node.js / Express의 경우 [connect-history-api-fallback 미들웨어](https://github.com/bripkens/connect-history-api-fallback) 사용을 고려하십시오. + +### Internet Information Services (IIS) + +1. [IIS UrlRewrite](https://www.iis.net/downloads/microsoft/url-rewrite) 설치 +2. 다음을 사용하여 사이트의 루트 디렉터리에 `web.config` + +```xml + + + + + + + + + + + + + + + + + +``` + +### Caddy v2 + +``` +try_files {path} / +``` + +### Caddy v1 + +``` +rewrite { + regexp .* + to {path} / +} +``` + +### Firebase hosting + +`firebase.json`에 추가하십시오. + +```json +{ + "hosting": { + "public": "dist", + "rewrites": [ + { + "source": "**", + "destination": "/index.html" + } + ] + } +} +``` + +### Netlify + +배포 된 파일에 포함 된 `_redirects` 파일을 만듭니다. + +``` +/* /index.html 200 +``` + +vue-cli, nuxt 및 vite 프로젝트에서이 파일은 일반적으로 `static` 또는 `public` 이라는 폴더 아래에 있습니다. + +You can more about the syntax on [Netlify documentation](https://docs.netlify.com/routing/redirects/rewrites-proxies/#history-pushstate-and-single-page-apps). You can also [create a `netlify.toml`](https://docs.netlify.com/configure-builds/file-based-configuration/) to combine *redirections* with other Netlify features. + +## 경고 + +이에 대한주의 사항이 있습니다. 찾을 수없는 모든 경로가 이제 `index.html` 파일을 제공하므로 서버에서 더 이상 404 오류를보고하지 않습니다. 이 문제를 해결하려면 404 페이지를 표시하도록 Vue 앱 내에서 포괄 경로를 구현해야합니다. + +```js +const router = createRouter({ + history: createWebHistory(), + routes: [{ path: '/:pathMatch(.*)', component: NotFoundComponent }], +}) +``` + +또는 Node.js 서버를 사용하는 경우 서버 측의 라우터를 사용하여 수신 URL을 일치시키고 일치하는 경로가 없으면 404로 응답하여 대체를 구현할 수 있습니다. 자세한 내용은 [Vue 서버 측 렌더링 문서](https://v3.vuejs.org/guide/ssr/introduction.html#what-is-server-side-rendering-ssr) 를 확인하세요. From 341c3bff7bea7d10619e68a21601f7e1010fdebc Mon Sep 17 00:00:00 2001 From: "Jisung, Ahn" Date: Fri, 2 Jul 2021 15:30:44 +0000 Subject: [PATCH 07/44] Translate named-routes.md via GitLocalize --- docs/ko/guide/essentials/named-routes.md | 38 ++++++++++++++++++++++++ 1 file changed, 38 insertions(+) create mode 100644 docs/ko/guide/essentials/named-routes.md diff --git a/docs/ko/guide/essentials/named-routes.md b/docs/ko/guide/essentials/named-routes.md new file mode 100644 index 000000000..1a0449296 --- /dev/null +++ b/docs/ko/guide/essentials/named-routes.md @@ -0,0 +1,38 @@ +# 명명 된 경로 + + + +`path` 와 함께 모든 `name` 을 제공 할 수 있습니다. 이것은 다음과 같은 장점이 있습니다. + +- 하드 코딩 된 URL 없음 +- `params` 자동 인코딩 / 디코딩 +- URL에 오타가 발생하지 않도록 방지 +- 경로 순위 우회 (ex a 를 표시) + +```js +const routes = [ + { + path: '/user/:username', + name: 'user', + component: User + } +] +``` + +명명된 경로에 링크하기 위해 `router-link` 컴포넌트에 `to` prop에 객체를 줄수 있습니다. + +```html + + User + +``` + +`router.push()` 와 함께 프로그래밍 방식으로 사용되는 것과 똑같은 객체입니다. + +```js +router.push({ name: 'user', params: { username: 'erina' } }) +``` + +두 경우 모두 라우터는 `/user/erina` 경로로 이동합니다. + +[여기에](https://github.com/vuejs/vue-router/blob/dev/examples/named-routes/app.js) 전체 예가 있습니다. From 8473a68a4eb07b682a36b295233e39f8ab83dfba Mon Sep 17 00:00:00 2001 From: "Jisung, Ahn" Date: Fri, 2 Jul 2021 15:39:27 +0000 Subject: [PATCH 08/44] Translate named-views.md via GitLocalize --- docs/ko/guide/essentials/named-views.md | 87 +++++++++++++++++++++++++ 1 file changed, 87 insertions(+) create mode 100644 docs/ko/guide/essentials/named-views.md diff --git a/docs/ko/guide/essentials/named-views.md b/docs/ko/guide/essentials/named-views.md new file mode 100644 index 000000000..d18800c8f --- /dev/null +++ b/docs/ko/guide/essentials/named-views.md @@ -0,0 +1,87 @@ +# 명명 된 뷰 + +때로는 여러 뷰를 중첩하지 않고 동시에 표시해야합니다 (예 : `sidebar` 뷰및 `main` 뷰 가 있는 레이아웃 만들기). 이것은 명명 된 뷰가 유용한 곳입니다. 뷰에 하나의 콘센트를 사용하는 대신 여러 개를 갖고 각각에 이름을 지정할 수 있습니다. 이름을 주지 않은 `router-view` 는 `default` 이 기본값으로 지정됩니다. + +```html + + + +``` + +뷰는 구성 요소를 사용하여 렌더링되므로 여러 뷰에는 동일한 경로에 대해 여러 구성 요소가 필요합니다. `components` ( **s 사용** ) 옵션을 사용해야합니다. + +```js +const router = createRouter({ + history: createWebHashHistory(), + routes: [ + { + path: '/', + components: { + default: Home, + // short for LeftSidebar: LeftSidebar + LeftSidebar, + // they match the `name` attribute on `` + RightSidebar, + }, + }, + ], +}) +``` + +이 예제의 작동 데모는 [여기](https://codesandbox.io/s/named-views-vue-router-4-examples-rd20l) 에서 찾을 수 있습니다. + +## 중첩 된 명명 된 뷰 + +중첩 된 뷰가있는 명명 된 뷰를 사용하여 복잡한 레이아웃을 만들 수 있습니다. 그렇게 할 때 중첩 된 `router-view` 에 이름을 지정해야합니다. 예를 들면 설정 패널이 있습니다. + +``` +/settings/emails /settings/profile ++-----------------------------------+ +------------------------------+ +| UserSettings | | UserSettings | +| +-----+-------------------------+ | | +-----+--------------------+ | +| | Nav | UserEmailsSubscriptions | | +------------> | | Nav | UserProfile | | +| | +-------------------------+ | | | +--------------------+ | +| | | | | | | | UserProfilePreview | | +| +-----+-------------------------+ | | +-----+--------------------+ | ++-----------------------------------+ +------------------------------+ +``` + +- `Nav` 는 일반적인 컴포넌트입니다. +- `UserSettings` 는 부모 뷰 컴포넌트입니다. +- `UserEmailsSubscriptions` , `UserProfile` , `UserProfilePreview` 는 중첩 된 뷰 컴포넌트입니다. + +**참고** : *HTML / CSS가 이러한 레이아웃을 표현하고 사용 된 구성 요소에 초점을 맞추기 위해 어떻게 생겼는지 잊어 버리겠습니다.* + +`UserSettings`의 `