|
| 1 | +--- |
| 2 | +sidebar: auto |
| 3 | +--- |
| 4 | + |
| 5 | +# API λ νΌλ°μ€ |
| 6 | + |
| 7 | +## `<router-link>` |
| 8 | + |
| 9 | +`<router-link>`λ λΌμ°ν° μ§μ μ±μμ μ¬μ©μ λ€λΉκ²μ΄μ
μ κ°λ₯νκ²νλ μ»΄ν¬λνΈμ
λλ€. λͺ©ν μμΉλ `to` propλ‘ μ§μ λ©λλ€. κΈ°λ³Έμ μΌλ‘ μ¬λ°λ₯Έ `href`λ₯Ό κ°λ `<a>`νκ·Έλ‘ λ λλ§ λμ§λ§ `tag` propλ‘ κ΅¬μ± λ μ μμ΅λλ€. λν λμ λΌμ°νΈκ° νμ±νλμ΄ μμΌλ©΄ λ§ν¬κ° μλμΌλ‘ active CSS ν΄λμ€λ₯Ό κ°μ Έμ΅λλ€. |
| 10 | + |
| 11 | +`<router-link>`λ λ€μκ³Ό κ°μ μ΄μ λ‘ νλ μ½λ λ `<a href="...">`λ³΄λ€ μ νΈλ©λλ€. |
| 12 | + |
| 13 | +- HTML5 νμ€ν 리 λͺ¨λμ ν΄μ λͺ¨λμμ λͺ¨λ λμΌν λ°©μμΌλ‘ μλνλ―λ‘ λͺ¨λλ₯Ό νΈλμ§μ
νκΈ°λ‘ κ²°μ νκ±°λ λΌμ°ν°κ° IE9μμ ν΄μ λͺ¨λλ‘ νΈλμ§μ
ν κ²½μ° λ³κ²½ν νμκ° μμ΅λλ€. |
| 14 | + |
| 15 | +- HTML5 νμ€ν 리 λͺ¨λμμ, `router-link`λ ν΄λ¦ μ΄λ²€νΈλ₯Ό μ°¨λ¨νμ¬ λΈλΌμ°μ κ° νμ΄μ§λ₯Ό λ€μ λ‘λνμ§ μλλ‘ν©λλ€. |
| 16 | + |
| 17 | +- HTML5 νμ€ν 리 λͺ¨λμμ `base` μ΅μ
μ μ¬μ©ν λ `to` propμ URLμ μ΄λ₯Ό ν¬ν¨ ν νμκ° μμ΅λλ€. |
| 18 | + |
| 19 | +## Props |
| 20 | + |
| 21 | +### to |
| 22 | + |
| 23 | + - μλ£ν: `string | Location` |
| 24 | + |
| 25 | + - νμ |
| 26 | + |
| 27 | + λ§ν¬μ λμ λΌμ°νΈλ₯Ό λνλ
λλ€. ν΄λ¦νλ©΄, `to` propμ κ°μ λ΄λΆμ μΌλ‘ `router.push()`μ μ λ¬ λ κ²μ΄λ―λ‘ κ°μ λ¬Έμμ΄μ΄λ μμΉ λμ€ν¬λ¦½ν° κ°μ²΄κ° λ μ μμ΅λλ€. |
| 28 | + |
| 29 | + ``` html |
| 30 | + <!-- 리ν°λ΄ string --> |
| 31 | + <router-link to="home">Home</router-link> |
| 32 | + <!-- μ΄λ κ² λ λλ§ λ©λλ€. --> |
| 33 | + <a href="home">Home</a> |
| 34 | + |
| 35 | + <!-- `v-bind`λ₯Ό μ΄μ©ν ννμ --> |
| 36 | + <router-link v-bind:to="'home'">Home</router-link> |
| 37 | + |
| 38 | + <!-- `v-bind`λ₯Ό μλ΅νλ©΄ λ€λ₯Έ propλ₯Ό λ°μΈλ© νλ κ²κ³Ό κ°μ΅λλ€. --> |
| 39 | + <router-link :to="'home'">Home</router-link> |
| 40 | + |
| 41 | + <!-- μμ κ°μ΅λλ€. --> |
| 42 | + <router-link :to="{ path: 'home' }">Home</router-link> |
| 43 | + |
| 44 | + <!-- μ΄λ¦μ κ°μ§λ λΌμ°νΈ --> |
| 45 | + <router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link> |
| 46 | + |
| 47 | + <!-- μΏΌλ¦¬κ° μμΌλ©΄, `/register?plan=private` μ΄ λ©λλ€. --> |
| 48 | + <router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link> |
| 49 | + ``` |
| 50 | + |
| 51 | +### replace |
| 52 | + |
| 53 | + - μλ£ν: `boolean` |
| 54 | + |
| 55 | + - κΈ°λ³Έκ°: `false` |
| 56 | + |
| 57 | + `replace` propλ₯Ό μ€μ νλ©΄ ν΄λ¦ν λ `router.push()` λμ `router.replace()`λ₯Ό νΈμΆν κ²μ΄λ―λ‘ λ΄λΉκ²μ΄μ
μ νμ€ν 리 λ μ½λλ₯Ό λ¨κΈ°μ§ μμ κ²μ
λλ€. |
| 58 | + |
| 59 | + ``` html |
| 60 | + <router-link :to="{ path: '/abc'}" replace></router-link> |
| 61 | + ``` |
| 62 | + |
| 63 | +### append |
| 64 | + |
| 65 | + - μλ£ν: `boolean` |
| 66 | + |
| 67 | + - κΈ°λ³Έκ°: `false` |
| 68 | + |
| 69 | + `append` propλ₯Ό μ€μ νλ©΄ νμ μλ κ²½λ‘κ° νμ¬ κ²½λ‘μ μΆκ°λ©λλ€. μλ₯Ό λ€μ΄`/a`μμ μλ λ§ν¬ `b`λ‘ μ΄λνλ€κ³ κ°μ νλ©΄ `append`μμ΄ `/b`μμ λλμ§λ§ `append`λ‘ `/a/b`μμ λλ©λλ€ . |
| 70 | + |
| 71 | + ``` html |
| 72 | + <router-link :to="{ path: 'relative/path'}" append></router-link> |
| 73 | + ``` |
| 74 | + |
| 75 | +### tag |
| 76 | + |
| 77 | + - μλ£ν: `string` |
| 78 | + |
| 79 | + - κΈ°λ³Έκ°: `"a"` |
| 80 | + |
| 81 | + λλλ‘ μ°λ¦¬λ `<router-link>`λ₯Ό `<li>`κ³Ό κ°μ λ€λ₯Έ νκ·Έλ‘ λ λλ§λκΈΈ λ°λλλ€. κ·Έλ° λ€μ `tag` propλ₯Ό μ¬μ©νμ¬ λ λλ§ν νκ·Έλ₯Ό μ§μ ν μ μμΌλ©° νμμ μν΄ ν΄λ¦ μ΄λ²€νΈλ₯Ό κ³μ μμ ν©λλ€. |
| 82 | + |
| 83 | + ``` html |
| 84 | + <router-link to="/foo" tag="li">foo</router-link> |
| 85 | + <!-- μ΄λ κ² λ λλ§λ©λλ€ --> |
| 86 | + <li>foo</li> |
| 87 | + ``` |
| 88 | + |
| 89 | +### active-class |
| 90 | + |
| 91 | + - μλ£ν: `string` |
| 92 | + |
| 93 | + - κΈ°λ³Έκ°: `"router-link-active"` |
| 94 | + |
| 95 | + λ§ν¬κ° νμ±ν λμ΄ μμ λ μ μ©λ active CSS ν΄λμ€λ₯Ό ꡬμ±ν©λλ€. κΈ°λ³Έκ°μ `linkActiveClass` λΌμ°ν° μμ±μ μ΅μ
μ ν΅ν΄ μ μμ μΌλ‘ μ€μ λ μ μμ΅λλ€. |
| 96 | + |
| 97 | +### exact |
| 98 | + |
| 99 | + - μλ£ν: `boolean` |
| 100 | + |
| 101 | + - κΈ°λ³Έκ°: `false` |
| 102 | + |
| 103 | + κΈ°λ³Έ νμ± ν΄λμ€ λ§€μΉ λμμ **ν¬κ΄μ μΈ λ§€μΉ** μ
λλ€. μλ₯Ό λ€μ΄, `<router-link to="/a">`λ νμ¬ κ²½λ‘κ° `/a` λλ `/a/`λ‘ μμνλ ν μ΄ ν΄λμ€λ₯Ό μ μ©ν©λλ€. |
| 104 | + |
| 105 | + μ΄κ²μ κ²°κ³Όλ `<router-link to="/">`κ° λͺ¨λ λΌμ°ν°μ λν΄ νμ±ν λ κ²μ
λλ€! λ§ν¬λ₯Ό "μμ μΌμΉ λͺ¨λ"λ‘ κ°μ νλ €λ©΄ `exact` propλ₯Ό μ¬μ©νμμμ€. |
| 106 | + |
| 107 | + ``` html |
| 108 | + <!-- μ΄ λ§ν¬λ `/` μμλ§ active λ©λλ€ --> |
| 109 | + <router-link to="/" exact> |
| 110 | + ``` |
| 111 | + |
| 112 | + active λ§ν¬ ν΄λμ€λ₯Ό μ€λͺ
νλ μΆκ° [μμ ](https://jsfiddle.net/8xrk1n9f/)λ₯Ό νμΈ νμμμ€. |
| 113 | + |
| 114 | +### event |
| 115 | + |
| 116 | + > 2.1.0+ |
| 117 | +
|
| 118 | + - μλ£ν: `string | Array<string>` |
| 119 | + |
| 120 | + - κΈ°λ³Έκ°: `'click'` |
| 121 | + |
| 122 | + λ§ν¬ λ€λΉκ²μ΄μ
μ νΈλ¦¬κ±° ν μμλ μ΄λ²€νΈλ₯Ό μ§μ ν©λλ€. |
| 123 | + |
| 124 | +### exact-active-class |
| 125 | + |
| 126 | + > 2.5.0+ |
| 127 | + - μλ£ν: `string` |
| 128 | + - κΈ°λ³Έκ°: `"router-link-exact-active"` |
| 129 | + |
| 130 | + μ ννκ² μΌμΉνλ λ§ν¬κ° νμ±λ μνμΌ λ μ μ©λλ CSS ν΄λμ€λ₯Ό μ§μ ν©λλ€. κΈ°λ³Έκ°μ`linkExactActiveClass` λΌμ°ν° μμ±μ μ΅μ
μ ν΅ν΄ μ μμΌλ‘ μ€μ λ μ μμ΅λλ€. |
| 131 | + |
| 132 | + |
| 133 | +### μΈλΆ μ리먼νΈμ active ν΄λμ€ μ μ©νκΈ° |
| 134 | + |
| 135 | +λλ‘ μ°λ¦¬λ active ν΄λμ€κ° `<a>` νκ·Έ μμ²΄κ° μλ μΈλΆ μ리먼νΈμ μ μ©λλ κ²μ μν μ μμ΅λλ€. μ΄ κ²½μ° `<router-link>` λ₯Ό μ¬μ©νμ¬ μΈλΆ μ리먼νΈλ₯Ό λ λλ§νκ³ μμ `<a>`λ λ΄λΆμ μμ±ν©λλ€. |
| 136 | + |
| 137 | +``` html |
| 138 | +<router-link tag="li" to="/foo"> |
| 139 | + <a>/foo</a> |
| 140 | +</router-link> |
| 141 | +``` |
| 142 | + |
| 143 | +μ΄ κ²½μ° `<a>`λ μ€μ λ§ν¬κ° λ κ²μ΄κ³ (μ¬λ°λ₯Έ `href`λ₯Ό μ»μ΅λλ€.), νμ± ν΄λμ€λ λ°κΉ₯ μͺ½ `<li>`μ μ μ©λ©λλ€. |
| 144 | + |
| 145 | +## `<router-view>` |
| 146 | + |
| 147 | +`<router-view>` μ»΄ν¬λνΈλ μ£Όμ΄μ§ λΌμ°νΈμ λν΄ μΌμΉνλ μ»΄ν¬λνΈλ₯Ό λ λλ§νλ ν¨μν μ»΄ν¬λνΈμ
λλ€. `<router-view>`μμ λ λλ§λ μ»΄ν¬λνΈλ μ체 `<router-view>`λ₯Ό ν¬ν¨ ν μ μμΌλ©°, μ΄λ μ€μ²© λ λΌμ°νΈλ₯Ό μν΄ μ»΄ν¬λνΈλ₯Ό λ λλ§ν©λλ€. |
| 148 | + |
| 149 | +## `<router-view>` props |
| 150 | + |
| 151 | +### name** |
| 152 | + |
| 153 | + - μλ£ν: `string` |
| 154 | + |
| 155 | + - κΈ°λ³Έκ°: `"default"` |
| 156 | + |
| 157 | + `<router-view>`κ° μ΄λ¦μ κ°μ§κ³ μμ λ, κ·Έκ²μ μΌμΉλ λΌμ°νΈ λ μ½λμ `components` μ΅μ
μμ ν΄λΉ μ΄λ¦μΌλ‘ μ»΄ν¬λνΈλ₯Ό λ λλ§ ν κ²μ
λλ€. μμ λ [μ΄λ¦μ κ°μ§λ λ·°](../guide/essentials/named-views.md)λ₯Ό μ°Έμ‘°νμμμ€. |
| 158 | + |
| 159 | +### λμ |
| 160 | + |
| 161 | +μ΄λ¦μ΄μλ λͺ¨λ propsλ λ λλ§λ μ»΄ν¬λνΈλ‘ μ λ¬λμ§λ§ λλΆλΆμ κ²½μ° λΌμ°νΈ λ³ λ°μ΄ν°λ λΌμ°νΈ λ§€κ° λ³μμ ν¬ν¨λ©λλ€. |
| 162 | + |
| 163 | +μ΄κ²μ λ¨μ§ μ»΄ν¬λνΈμ΄λ―λ‘ `<transition>` λ° `<keep-alive>`μ ν¨κ» μλν©λλ€. μμͺ½ λͺ¨λλ₯Ό μ¬μ©ν λλ `<keep-alive>`λ₯Ό λ€μκ³Ό κ°μ΄ μ¬μ©νμμμ€. |
| 164 | + |
| 165 | +``` html |
| 166 | +<transition> |
| 167 | + <keep-alive> |
| 168 | + <router-view></router-view> |
| 169 | + </keep-alive> |
| 170 | +</transition> |
| 171 | +``` |
| 172 | + |
| 173 | +## λΌμ°ν° μΈμ€ν΄μ€ |
| 174 | + |
| 175 | +### router.app |
| 176 | + |
| 177 | +- μλ£ν: `Vue instance` |
| 178 | + |
| 179 | + `router`κ° μ£Όμ
λ λ£¨νΈ Vue μΈμ€ν΄μ€. |
| 180 | + |
| 181 | +### router.mode |
| 182 | + |
| 183 | +- μλ£ν: `string` |
| 184 | + |
| 185 | + λΌμ°ν°κ° μ¬μ©νλ [mode](./#mode). |
| 186 | + |
| 187 | +### router.currentRoute |
| 188 | + |
| 189 | +- μλ£ν: `Route` |
| 190 | + |
| 191 | + [λΌμ°νΈ κ°μ²΄](#the-route-object)λ‘ νμλ νμ¬ λΌμ°νΈ. |
| 192 | + |
| 193 | +## Methods |
| 194 | + |
| 195 | +### router.beforeEach |
| 196 | +### router.beforeResolve |
| 197 | +### router.afterEach |
| 198 | + |
| 199 | +μ μ λ€λΉκ²μ΄μ
κ°λ μΆκ°. [λ€λΉκ²μ΄μ
κ°λ](../guide/advanced/navigation-guards.md)λ₯Ό 보μμμ€. |
| 200 | + |
| 201 | +2.5.0μ΄μμμ μΈ κ°μ§ λ©μλ λͺ¨λ λ±λ‘λ guard / hookμ μ κ±°νλ ν¨μλ₯Ό λ°νν©λλ€. |
| 202 | + |
| 203 | +### router.push |
| 204 | +### router.replace |
| 205 | +### router.go |
| 206 | +### router.back |
| 207 | +### router.forward |
| 208 | + |
| 209 | + νλ‘κ·Έλλ° λ°©μμΌλ‘ μ URLλ‘ μ΄λν©λλ€. [νλ‘κ·Έλλ° λ°©μ λ€λΉκ²μ΄μ
](../guide/essentials/navigation.md)μ μ°Έμ‘°νμμμ€. |
| 210 | + |
| 211 | +### router.getMatchedComponents |
| 212 | + |
| 213 | + μ§μ λ μμΉ λλ νμ¬μ λΌμ°νΈμ μΌμΉνλ μ»΄νΌλνΈ(μΈμ€ν΄μ€λ μλκ³ μ μ/μμ±μ)μ λ°°μ΄μ λ°νν©λλ€. μ΄λ μ£Όλ‘ λ°μ΄ν°λ₯Ό ν리νμΉ(prefetching)νκΈ° μν΄ μλ² μΈ‘ λ λλ§ λμ μ¬μ©λ©λλ€. |
| 214 | + |
| 215 | +### router.resolve |
| 216 | + |
| 217 | + > 2.1.0+ |
| 218 | +
|
| 219 | + μλ°©ν₯ URL ν΄μ. `<router-link/>`μμ μ¬μ©λ κ²κ³Ό κ°μ νμμ μμΉκ° μ£Όμ΄μ§λ©΄ λ€μκ³Ό κ°μ΄ μ²λ¦¬λ μμ±μ κ°μ§ κ°μ²΄λ₯Ό λ°νν©λλ€. |
| 220 | + |
| 221 | + ``` js |
| 222 | + { |
| 223 | + location: Location; |
| 224 | + route: Route; |
| 225 | + href: string; |
| 226 | + } |
| 227 | + ``` |
| 228 | + |
| 229 | +- `current` νμ¬ λΌμ°νΈλ₯Ό λνλ
λλ€. (λλΆλΆμ κ²½μ°μ λ³κ²½ν μΌμ΄ μμ΅λλ€.) |
| 230 | + |
| 231 | +- `append`λ `current` λΌμ°νΈμ μΆκ°ν μ μλλ‘ ν©λλ€ ([`router-link`](router-link.md#props)μ²λΌ) |
| 232 | + |
| 233 | +### router.addRoutes |
| 234 | + |
| 235 | + > 2.2.0+ |
| 236 | +
|
| 237 | + λΌμ°ν°μ λμ μΌλ‘ λ λ§μ λΌμ°νΈλ₯Ό μΆκ°ν μ μμ΅λλ€. μ λ¬μΈμλ `routes` μμ±μ μ΅μ
κ³Ό λμΌν κ²½λ‘ μ€μ ν¬λ§·μ μ¬μ©νλ λ°°μ΄μ΄μ΄μΌ ν©λλ€. |
| 238 | + |
| 239 | +### router.onReady |
| 240 | + |
| 241 | + > 2.2.0+ |
| 242 | +
|
| 243 | + μ΄ λ©μλλ λΌμ°ν°κ° μ΄κΈ° νμμ μλ£ν λ νΈμΆνλ μ½λ°±μ λκΈ°μν΅λλ€. μ¦, μ΄κΈ° λΌμ°νΈμ μ°κ²°λ λͺ¨λ λΉλκΈ° μ
λ ₯ ν
λ° λΉλκΈ° μ»΄ν¬λνΈλ₯Ό ν΄κ²°ν©λλ€. |
| 244 | + |
| 245 | + μ΄λ μλ²μ ν΄λΌμ΄μΈνΈ λͺ¨λ μΌκ΄λ μΆλ ₯μ 보μ₯νκΈ° μν΄ μλ²μΈ‘ λ λλ§μ μ¬μ©ν λ μ μ©ν©λλ€. |
| 246 | + |
| 247 | +### router.onError |
| 248 | + |
| 249 | + > 2.4.0+ |
| 250 | +
|
| 251 | +λΌμ°νΈ νμ μ€μ μλ¬κ° λ°κ²¬λλ©΄ νΈμΆ λ μ½λ°±μ λ±λ‘νμμμ€. νΈμΆ ν μλ¬μ μ μνμμμ€. μλ¬λ λ€μ μλλ¦¬μ€ μ€ νλμ΄μ΄μΌν©λλ€. |
| 252 | + |
| 253 | + - μλ¬λ λΌμ°νΈ κ°λ κΈ°λ₯ λ΄μμ λκΈ°μ μΌλ‘ λ°μν κ²½μ°. |
| 254 | + - μλ¬λ λΌμ°νΈ κ°λ ν¨μ λ΄μμ `next(err)`λ₯Ό νΈμΆνμ¬ μΊμΉν κ²½μ° |
| 255 | + - λΌμ°νΈλ₯Ό λ λλ§νλλ° νμν λΉλκΈ° μ»΄ν¬λνΈλ₯Ό μ²λ¦¬νλ €κ³ ν λ μλ¬κ° λ°μν κ²½μ°. |
| 256 | + |
| 257 | +## μ»΄ν¬λνΈ μ£Όμ
|
| 258 | + |
| 259 | +### μ£Όμ
λ μμ± |
| 260 | + |
| 261 | +μ΄λ¬ν νλ‘νΌν°λ λΌμ°ν° μΈμ€ν΄μ€λ₯Ό λ£¨νΈ μΈμ€ν΄μ€μ `router` μ΅μ
μΌλ‘ μ λ¬ν¨μΌλ‘μ¨ λͺ¨λ μμ μ»΄ν¬λνΈμ μ£Όμ
λ©λλ€. |
| 262 | + |
| 263 | +- #### $router |
| 264 | + |
| 265 | + λΌμ°ν° μΈμ€ν΄μ€ |
| 266 | + |
| 267 | +- #### $route |
| 268 | + |
| 269 | + νμ¬ νμ±ν λ [Route](#the-route-object)μ
λλ€. μ΄ μμ±μ μ½κΈ° μ μ©μ΄λ©° ν΄λΉ μμ±μ λ³κ²½ν μλ μμ§λ§ κ°μ ν μ μμ΅λλ€. |
| 270 | + |
| 271 | +### νμ±νλ μ΅μ
|
| 272 | + |
| 273 | + - beforeRouteEnter |
| 274 | + - beforeRouteUpdate |
| 275 | + - beforeRouteLeave |
| 276 | + |
| 277 | + [μ»΄ν¬λνΈ λ΄λΆ κ°λ](../guide/advanced/navigation-guards.md#incomponent-guards)λ₯Ό νμΈνμΈμ. |
0 commit comments