|
| 1 | +# ๋ผ์ฐํธ ์ปดํฌ๋ํธ์ ์์ฑ ์ ๋ฌ |
| 2 | + |
| 3 | +์ปดํฌ๋ํธ์์ `$route`๋ฅผ ์ฌ์ฉํ๋ฉด ํน์ URL์์๋ง ์ฌ์ฉํ ์ ์๋ ์ปดํฌ๋ํธ์ ์ ์ฐ์ฑ์ ์ ํํ๋ ๋ผ์ฐํธ์ ๊ฐํ ๊ฒฐํฉ์ ๋ง๋ญ๋๋ค. |
| 4 | + |
| 5 | +์ปดํฌ๋ํธ์ ๋ผ์ฐํฐ ์์ฑ์ ๋ถ๋ฆฌํ๋ ค๋ฉด ๋ค์๊ณผ ๊ฐ์ด ํ์ญ์์ค. |
| 6 | + |
| 7 | +**โ $route์ ์์กด์ฑ ์ถ๊ฐ** |
| 8 | + |
| 9 | +``` js |
| 10 | +const User = { |
| 11 | + template: '<div>User {{ $route.params.id }}</div>' |
| 12 | +} |
| 13 | +const router = new VueRouter({ |
| 14 | + routes: [ |
| 15 | + { path: '/user/:id', component: User } |
| 16 | + ] |
| 17 | +}) |
| 18 | +``` |
| 19 | + |
| 20 | +**๐ ์์ฑ์ ์์กด์ฑ ํด์ ** |
| 21 | + |
| 22 | +``` js |
| 23 | +const User = { |
| 24 | + props: ['id'], |
| 25 | + template: '<div>User {{ id }}</div>' |
| 26 | +} |
| 27 | +const router = new VueRouter({ |
| 28 | + routes: [ |
| 29 | + { path: '/user/:id', component: User, props: true } |
| 30 | + ] |
| 31 | +}) |
| 32 | +``` |
| 33 | + |
| 34 | +์ด๋ฅผ ํตํด ์ด๋์๋ ์ปดํฌ๋ํธ๋ฅผ ์ฌ์ฉํ ์ ์์ผ๋ฏ๋ก ์ปดํฌ๋ํธ ์ฌ์ฌ์ฉ ๋ฐ ํ
์คํธํ๊ธฐ๊ฐ ๋ ์ฝ์ต๋๋ค. |
| 35 | + |
| 36 | +### Boolean ๋ชจ๋ |
| 37 | + |
| 38 | +props๋ฅผ true๋ก ์ค์ ํ๋ฉด route.params๊ฐ ์ปดํฌ๋ํธ props๋ก ์ค์ ๋ฉ๋๋ค. |
| 39 | + |
| 40 | +### ๊ฐ์ฒด ๋ชจ๋ |
| 41 | + |
| 42 | +props๊ฐ ๊ฐ์ฒด์ผ๋ ์ปดํฌ๋ํธ props๊ฐ ์๋ ๊ทธ๋๋ก ์ค์ ๋ฉ๋๋ค. |
| 43 | +props๊ฐ ์ ์ ์ผ ๋ ์ ์ฉํฉ๋๋ค. |
| 44 | + |
| 45 | +``` js |
| 46 | +const router = new VueRouter({ |
| 47 | + routes: [ |
| 48 | + { path: '/promotion/from-newsletter', component: Promotion, props: { newsletterPopup: false } } |
| 49 | + ] |
| 50 | +}) |
| 51 | +``` |
| 52 | + |
| 53 | +### ํจ์ ๋ชจ๋ |
| 54 | + |
| 55 | +props๋ฅผ ๋ฐํํ๋ ํจ์๋ฅผ ๋ง๋ค ์ ์์ต๋๋ค. |
| 56 | +์ด๋ฅผ ํตํด ์ ๋ฌ์ธ์๋ฅผ ๋ค๋ฅธ ํ์
์ผ๋ก ์บ์คํ
ํ๊ณ ์ ์ ์ธ ๊ฐ์ ๋ผ์ฐํธ ๊ธฐ๋ฐ ๊ฐ๊ณผ ๊ฒฐํฉ๋ฉ๋๋ค. |
| 57 | + |
| 58 | +``` js |
| 59 | +const router = new VueRouter({ |
| 60 | + routes: [ |
| 61 | + { path: '/search', component: SearchUser, props: (route) => ({ query: route.query.q }) } |
| 62 | + ] |
| 63 | +}) |
| 64 | +``` |
| 65 | + |
| 66 | +`/search?q=vue`๋ `{query: "vue"}`๋ฅผ SearchUser ์ปดํฌ๋ํธ์ ์ ๋ฌํฉ๋๋ค. |
| 67 | + |
| 68 | +๋ผ์ฐํธ ๋ณ๊ฒฝ์์๋ง ํ๊ฐ๋๋ฏ๋ก props ํจ์๋ ์ํ๋ฅผ ์ ์ฅํ์ง ์๋๋ก ํฉ๋๋ค. |
| 69 | +props๋ฅผ ์ ์ํ ์ํ๊ฐ ํ์ํ ๊ฒฝ์ฐ ๋ํผ ์ปดํฌ๋ํธ๋ฅผ ์ฌ์ฉํ๋ฉด ์ํ๊ฐ ๋ณ๊ฒฝ๋ ๋๋ง๋ค ์๋ตํ ์ ์์ต๋๋ค. |
| 70 | + |
| 71 | +๊ณ ๊ธ ์ฌ์ฉ์๋ฅผ ๋ณด๋ ค๋ฉด [์์ ](https://github.com/vuejs/vue-router/blob/dev/examples/route-props/app.js)๋ฅผ ํ์ธํ์ธ์. |
0 commit comments