File tree Expand file tree Collapse file tree 4 files changed +26
-2
lines changed Expand file tree Collapse file tree 4 files changed +26
-2
lines changed Original file line number Diff line number Diff line change 1
1
# 경로 지연 로딩
2
2
3
- <vueschoollink href =" https://vueschool.io/lessons/lazy-loading-routes-vue-cli-only " title =" Learn about lazy loading routes " ></vueschoollink >
3
+ <VueSchoolLink
4
+ href="https://vueschool.io/lessons/lazy-loading-routes-vue-cli-only "
5
+ title="Learn about lazy loading routes"
6
+ />
4
7
5
8
번들러를 사용하여 앱을 빌드하면 JavaScript 번들이 상당히 커져 페이지 로드 시간에 영향을 미칠 수 있습니다. 각 경로의 구성 요소를 별도의 청크로 분할하고 경로를 방문 할 때 만 로드 할 수 있다면 더 효율적일 것입니다.
6
9
Original file line number Diff line number Diff line change 1
1
# 트랜지션(Transitions)
2
2
3
- <vueschoollink href =" https://vueschool.io/lessons/route-transitions " title =" Learn about route transitions " ></vueschoollink >
3
+ <VueSchoolLink
4
+ href="https://vueschool.io/lessons/route-transitions "
5
+ title="Learn about route transitions"
6
+ />
4
7
5
8
route 컴포넌트에서 트랜지션을 사용하고 탐색을 애니메이션 처리 하려면 [ v-slot API] ( ../../api/#router-view-s-v-slot ) 를 사용합니다.
6
9
Original file line number Diff line number Diff line change 1
1
# 매개변수(Params)를 활용한 동적 라우트 매칭(Dynamic Route Matching)
2
2
3
3
4
+ <VueSchoolLink
5
+ href="https://vueschool.io/lessons/reacting-to-param-changes "
6
+ title="Learn how to react to param changes"
7
+ />
8
+
4
9
매우 자주 주어진 패턴의 경로를 동일한 컴포넌트에 매핑해야합니다. 예를 들어 모든 사용자에 대해 렌더링되어야하지만 사용자 ID가 다른 ` User ` 컴포넌트가 있을 수 있습니다. Vue Router 에서는 이를 달성하기 위해 경로의 동적 세그먼트를 사용할 수 있으며 이를 * param* 이라고합니다.
5
10
6
11
``` js
@@ -46,6 +51,10 @@ pattern | matched path | $route.params
46
51
47
52
## 매개변수(Params) 변경에 대한 반응
48
53
54
+ <VueSchoolLink
55
+ href="https://vueschool.io/lessons/reacting-to-param-changes "
56
+ title="Learn how to react to param changes"
57
+ />
49
58
50
59
매개 변수(params)와 함께 경로를 사용할 때 주의해야 할 점은 사용자가 ` /users/johnny ` 에서 ` /users/jolyne ` 으로 이동 할 때 **   ; 동일한 컴포넌트 인스턴스가 재사용 된다는 것입니다. ** 두 경로 모두 동일한 컴포넌트를 렌더링하므로 이전 인스턴스를 삭제 한 다음 새 인스턴스를 만드는 것보다 더 효율적입니다. ** 그러나 이는 컴포넌트 수명주기 훅(hook)이 호출되지 않음을 의미하기도 합니다.**
51
60
@@ -79,6 +88,11 @@ const User = {
79
88
80
89
## 모두 캐치(Catch all) / 404 Not fount Route
81
90
91
+ <VueSchoolLink
92
+ href="https://vueschool.io/lessons/404-not-found-page "
93
+ title="Learn how to make a catch all/404 not found route"
94
+ />
95
+
82
96
83
97
일반 매개 변수(params)는 ` / ` 로 구분된 URL 조각 사이의 문자만 일치합니다. ** 무엇이든** 일치 시키려면 * param* 바로 뒤에 괄호 안에 정규식을 추가하여 맞춤 * param* 정규식을 사용할 수 있습니다.
84
98
Original file line number Diff line number Diff line change 1
1
# Route 컴포넌트에 Prop 전달하기
2
2
3
+ <VueSchoolLink
4
+ href="https://vueschool.io/lessons/route-props "
5
+ title="Learn how to pass props to route components"
6
+ />
3
7
4
8
` $route ` 를 사용하면 특정 URL에서만 사용할 수 있으므로 컴포넌트의 유연성을 제한하며, 경로와 긴밀하게 결합됩니다. ` props ` 옵션을 사용하여 이 동작을 분리 할 수 있습니다.
5
9
You can’t perform that action at this time.
0 commit comments