|
2 | 2 |
|
3 | 3 | ์ด๋ฆ์์ ์ ์ ์๋ฏ์ด `vue-router`๊ฐ ์ ๊ณตํ๋ ๋ค๋น๊ฒ์ด์
๊ฐ๋๋ ์ฃผ๋ก ๋ฆฌ๋๋ ์
ํ๊ฑฐ๋ ์ทจ์ํ์ฌ ๋ค๋น๊ฒ์ด์
์ ๋ณดํธํ๋ ๋ฐ ์ฌ์ฉ๋ฉ๋๋ค. ๋ผ์ฐํธ ํ์ ํ๋ก์ธ์ค์ ์ฐ๊ฒฐํ๋ ๋ฐฉ๋ฒ์๋ ์ ์ญ, ๋ผ์ฐํธ๋ณ ๋๋ ์ปดํฌ๋ํธ๊ฐ ์์ต๋๋ค.
|
4 | 4 |
|
5 |
| -**Params ๋๋ ์ฟผ๋ฆฌ๋ฅผ ๋ณ๊ฒฝํ๋ฉด ๋ค๋น๊ฒ์ด์
๊ฐ๋๊ฐ ์คํ๋์ง ์์ต๋๋ค**. ๋จ์ํ [`$route` ๊ฐ์ฒด๋ฅผ ๊ฐ์](../essentials/dynamic-matching.md#reacting-to-params-changes)ํ๊ณ ๊ทธ ๋ณํ์ ๋ฐ์ํ์ญ์์ค. |
| 5 | +**Params ๋๋ ์ฟผ๋ฆฌ๋ฅผ ๋ณ๊ฒฝํ๋ฉด ๋ค๋น๊ฒ์ด์
๊ฐ๋๊ฐ ์คํ๋์ง ์์ต๋๋ค**. ๋จ์ํ [`$route` ๊ฐ์ฒด๋ฅผ ๊ฐ์](../essentials/dynamic-matching.md#reacting-to-params-changes)ํ๊ณ ๊ทธ ๋ณํ์ ๋ฐ์ํ์ญ์์ค. ๋๋ ์ปดํฌ๋ํธ ๊ฐ๋์ `beforeRouteUpadte`๋ฅผ ์ฌ์ฉํ์ญ์์ค |
6 | 6 |
|
7 | 7 | ### ์ ์ญ ๊ฐ๋
|
8 | 8 |
|
@@ -32,8 +32,19 @@ router.beforeEach((to, from, next) => {
|
32 | 32 |
|
33 | 33 | - **`next('/')` ๋๋ `next({ path: '/' })`**: ๋ค๋ฅธ ์์น๋ก ๋ฆฌ๋๋ ์
ํฉ๋๋ค. ํ์ฌ ๋ค๋น๊ฒ์ด์
์ด ์ค๋จ๋๊ณ ์ ๋ค๋น๊ฒ์ด์
์ด ์์๋ฉ๋๋ค.
|
34 | 34 |
|
| 35 | + - **`next(error)`**: (2.4.0 ์ดํ ์ถ๊ฐ) `next`์ ์ ๋ฌ๋ ์ธ์๊ฐ `Error` ์ ์ธ์คํด์ค์ด๋ฉด ํ์์ด ์ค๋จ๋๊ณ `router.onError()`๋ฅผ ์ด์ฉํด ๋ฑ๋ก ๋ ์ฝ๋ฐฑ์ ์๋ฌ๊ฐ ์ ๋ฌ๋ฉ๋๋ค. |
| 36 | + |
| 37 | + |
35 | 38 | **ํญ์ `next` ํจ์๋ฅผ ํธ์ถํ์ญ์์ค. ๊ทธ๋ ์ง ์์ผ๋ฉด ํ
์ด ์ ๋ ๋ถ๋ฌ์ง์ง ์์ต๋๋ค.**
|
36 | 39 |
|
| 40 | +### Global Resolve Guards |
| 41 | + |
| 42 | +> 2.5.0์์ ์ถ๊ฐ๋จ |
| 43 | +
|
| 44 | +2.5.0 ์ดํ๋ก `router.onResolve`๋ฅผ ์ฌ์ฉํ์ฌ ๊ธ๋ก๋ฒ ๊ฐ๋๋ฅผ ๋ฑ๋ก ํ ์ ์์ต๋๋ค. ์ด๋ `router.beforeEach`์ ์ ์ฌํฉ๋๋ค. ๋ชจ๋ ์ปดํฌ๋ํธ ๊ฐ๋์ ๋น๋๊ธฐ ๋ผ์ฐํธ ์ปดํฌ๋ํธ๋ฅผ ๋ถ๋ฌ์จ ํ ๋ค๋น๊ฒ์ด์
๊ฐ๋๋ฅผ ํ์ธํ๊ธฐ ์ ์ ํธ์ถ๋๋ค๋ ์ฐจ์ด๊ฐ ์์ต๋๋ค |
| 45 | + |
| 46 | +### Global After Hooks |
| 47 | + |
37 | 48 | ์ ์ญ ํ
์ ๋ฑ๋ก ํ ์๋ ์์ง๋ง, ๊ฐ๋์ ๋ฌ๋ฆฌ ์ด ํ
์ `next` ํจ์๋ฅผ ์ป์ง ๋ชปํ๋ฉฐ ๋ค๋น๊ฒ์ด์
์ ์ํฅ์ ์ค ์ ์์ต๋๋ค.
|
38 | 49 |
|
39 | 50 | ``` js
|
@@ -98,3 +109,18 @@ beforeRouteEnter (to, from, next) {
|
98 | 109 | ```
|
99 | 110 |
|
100 | 111 | `beforeRouteLeave` ์์์ `this`์ ์ง์ ์ ๊ทผ ํ ์ ์์ต๋๋ค. leave ๊ฐ๋๋ ์ผ๋ฐ์ ์ผ๋ก ์ฌ์ฉ์๊ฐ ์ ์ฅํ์ง ์์ ํธ์ง ๋ด์ฉ์ ๋๊ณ ์ค์๋ก ๋ผ์ฐํธ๋ฅผ ๋ ๋๋ ๊ฒ์ ๋ฐฉ์งํ๋๋ฐ ์ฌ์ฉ๋ฉ๋๋ค. ํ์์ `next(false)`๋ฅผ ํธ์ถํ์ฌ ์ทจ์ํ ์ ์์ต๋๋ค.
|
| 112 | + |
| 113 | +### ์ ์ฒด ๊ฐ๋ ์๋๋ฆฌ์ค |
| 114 | + |
| 115 | +1. ๋ค๋น๊ฒ์ด์
์ด ํธ๋ฆฌ๊ฑฐ๋จ |
| 116 | +2. ๋นํ์ฑํ๋ ์ปดํฌ๋ํธ์์ ๊ฐ๋๋ฅผ ํธ์ถ |
| 117 | +3. ์ ์ญ `beforeEach` ๊ฐ๋ ํธ์ถ |
| 118 | +4. ์ฌ์ฌ์ฉ๋๋ ์ปดํฌ๋ํธ์์ `beforeRouteUpdate` ๊ฐ๋ ํธ์ถ (2.2 ์ด์) |
| 119 | +5. ๋ผ์ฐํธ ์ค์ ์์ `beforeEnter` ํธ์ถ |
| 120 | +6. ๋น๋๊ธฐ ๋ผ์ฐํธ ์ปดํฌ๋ํธ ํด๊ฒฐ |
| 121 | +7. ํ์ฑํ๋ ์ปดํฌ๋ํธ์์ `beforeRouteEnter` ํธ์ถ |
| 122 | +8. ์ ์ญ `beforeResolve` ๊ฐ๋ ํธ์ถ (2.5์ด์) |
| 123 | +9. ๋ค๋น๊ฒ์ด์
์๋ฃ. |
| 124 | +10. ์ ์ญ `afterEach` ํ
ํธ์ถ |
| 125 | +11. DOM ๊ฐฑ์ ํธ๋ฆฌ๊ฑฐ ๋จ |
| 126 | +12. ์ธ์คํด์คํ ๋ ์ธ์คํด์ค๋ค์ `beforeRouteEnter`๊ฐ๋์์ `next`์ ์ ๋ฌ ๋ ์ฝ๋ฐฑ์ ํธ์ถํฉ๋๋ค |
0 commit comments