forked from vuejs/router
-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
docs: update examples to use SFCs (vuejs#2174)
- Loading branch information
1 parent
79a6877
commit dd3d18b
Showing
12 changed files
with
596 additions
and
325 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,133 +1,121 @@ | ||
# Vue Router์ ์ปดํฌ์ง์ API %{#vue-router-and-the-composition-api}% | ||
# Vue Router์ ์ปดํฌ์ง์ API %{#Vue-Router-and-the-Composition-API}% | ||
|
||
<VueSchoolLink | ||
href="https://vueschool.io/lessons/router-and-the-composition-api" | ||
title="Learn how to use Vue Router with the composition API" | ||
href="https://vueschool.io/lessons/router-and-the-composition-api" | ||
title="Vue Router์ ์ปดํฌ์ง์ API ์ฌ์ฉ๋ฒ ๋ฐฐ์ฐ๊ธฐ" | ||
/> | ||
|
||
Vue 3์์๋ `setup`๊ณผ [์ปดํฌ์ง์ API](https://vuejs.kr/guide/extras/composition-api-faq.html)๊ฐ ๋์ ๋์์ต๋๋ค. ๋ฐ๋ผ์ ์ปดํฌ๋ํธ ๋ด๋ถ์ ํ์ ๊ฐ๋์ `this`์์ ๋ผ์ฐํฐ์ ์ ๊ทผํ๋ ๊ธฐ์กด ๋ฐฉ์์ ๋์ฒดํ ์ ์๋ ๋ช ๊ฐ์ง ์๋ก์ด ํจ์๋ฅผ ์ฌ์ฉํ ์ ์์ต๋๋ค. | ||
Vue์ [์ปดํฌ์ง์ API](https://vuejs.org/guide/extras/composition-api-faq.html) ๋์ ์ ์๋ก์ด ๊ฐ๋ฅ์ฑ์ ์ด์์ง๋ง, Vue Router์ ์ ์ฒด ์ ์ฌ๋ ฅ์ ํ์ฉํ๊ธฐ ์ํด์๋ ๋ช ๊ฐ์ง ์๋ก์ด ํจ์๋ฅผ ์ฌ์ฉํ์ฌ `this`์ ๋ํ ์ ๊ทผ์ ๋์ฒดํ๊ณ ์ปดํฌ๋ํธ ๋ด ๋ค๋น๊ฒ์ด์ ๊ฐ๋๋ฅผ ์ฌ์ฉํ ํ์๊ฐ ์์ต๋๋ค. | ||
|
||
## `setup` ๋ด๋ถ์์ ๋ผ์ฐํฐ ๋ฐ ํ์ฌ ๋ผ์ฐํธ์ ์ ๊ทผํ๊ธฐ %{#accessing-the-router-and-current-route-inside-setup}% | ||
## `setup` ๋ด์์ ๋ผ์ฐํฐ ๋ฐ ํ์ฌ ๋ฃจํธ ์ ๊ทผ %{#Accessing-the-Router-and-current-Route-inside-setup}% | ||
|
||
`setup` ๋ด๋ถ์์๋ `this`์ ์ ๊ทผํ ์ ์๊ธฐ ๋๋ฌธ์, `this.$router` ๋๋ `this.$route`์ ์ ๊ทผํ ์ ์์ต๋๋ค. ์ ๊ทผํ๊ธฐ ์ํด์๋ `useRouter` ๋๋ `useRoute` ํจ์๋ฅผ ์ฌ์ฉํด์ผ ํฉ๋๋ค. | ||
`setup` ๋ด์์ `this`์ ์ ๊ทผํ ์ ์๊ธฐ ๋๋ฌธ์ `this.$router`๋ `this.$route`์ ์ง์ ์ ๊ทผํ ์ ์์ต๋๋ค. ๋์ , `useRouter`์ `useRoute` ์ปดํฌ์ ๋ธ์ ์ฌ์ฉํฉ๋๋ค: | ||
|
||
```js | ||
```vue | ||
<script setup> | ||
import { useRouter, useRoute } from 'vue-router' | ||
export default { | ||
setup() { | ||
const router = useRouter() | ||
const route = useRoute() | ||
|
||
function pushWithQuery(query) { | ||
router.push({ | ||
name: 'search', | ||
query: { | ||
...route.query, | ||
...route, | ||
}, | ||
}) | ||
} | ||
}, | ||
const router = useRouter() | ||
const route = useRoute() | ||
function pushWithQuery(query) { | ||
router.push({ | ||
name: 'search', | ||
query: { | ||
...route.query, | ||
...query, | ||
}, | ||
}) | ||
} | ||
</script> | ||
``` | ||
|
||
`route`๋ ๋ฐ์ํ ๊ฐ์ฒด์ด๋ฏ๋ก ํด๋น ์์ฑ์ ๋ชจ๋ ๊ฐ์ํ ์ ์์ผ๋ฏ๋ก, `route` ๊ฐ์ฒด ์ ์ฒด๋ฅผ ๊ฐ์ํ๋ ๊ฒ์ ํผํ๋๊ฒ ์ข์ต๋๋ค. ๋๋ถ๋ถ์ ๊ฒฝ์ฐ, ๋ณ๊ฒฝํ๋ ค๋ ํ๋ผ๋ฏธํฐ๋ฅผ ์ง์ ๊ฐ์ํ๋ ๊ฒ์ด ์ข์ต๋๋ค. | ||
`route` ๊ฐ์ฒด๋ ๋ฐ์ํ ๊ฐ์ฒด์ ๋๋ค. ๋๋ถ๋ถ์ ๊ฒฝ์ฐ, `route` ๊ฐ์ฒด ์ ์ฒด๋ฅผ ๊ฐ์ํ๋ ๊ฒ์ **ํผํด์ผ ํฉ๋๋ค**. ๋์ , ๋ณ๊ฒฝ์ ๊ธฐ๋ํ๋ ์์ฑ๋ค์ ์ง์ ๊ฐ์ํ ์ ์์ต๋๋ค: | ||
|
||
```js | ||
```vue | ||
<script setup> | ||
import { useRoute } from 'vue-router' | ||
import { ref, watch } from 'vue' | ||
export default { | ||
setup() { | ||
const route = useRoute() | ||
const userData = ref() | ||
|
||
// ํ๋ผ๋ฏธํฐ๊ฐ ๋ณ๊ฒฝ๋ ๋ ์ ์ ์ ๋ณด๋ฅผ ๊ฐ์ ธ์ค๊ธฐ. | ||
watch( | ||
() => route.params.id, | ||
async newId => { | ||
userData.value = await fetchUser(newId) | ||
} | ||
) | ||
}, | ||
} | ||
const route = useRoute() | ||
const userData = ref() | ||
// ํ๋ผ๋ฏธํฐ ๋ณ๊ฒฝ ์ ์ฌ์ฉ์ ์ ๋ณด๋ฅผ ๊ฐ์ ธ์ต๋๋ค | ||
watch( | ||
() => route.params.id, | ||
async newId => { | ||
userData.value = await fetchUser(newId) | ||
} | ||
) | ||
</script> | ||
``` | ||
|
||
ํ ํ๋ฆฟ ๋ด๋ถ์์๋ ์ฌ์ ํ `$router` ๋ฐ `$route`๋ก ์ ๊ทผํ ์ ์์ผ๋ฏ๋ก, `setup` ๋ด๋ถ์์ `router` ๋ฐ `route`๋ฅผ ๋ฐํํ ํ์๋ ์์ต๋๋ค. | ||
ํ ํ๋ฆฟ์์๋ ์ฌ์ ํ `$router`์ `$route`์ ์ ๊ทผํ ์ ์์ผ๋ฏ๋ก, ํ ํ๋ฆฟ์์๋ง ์ด ๊ฐ์ฒด๋ค์ด ํ์ํ ๊ฒฝ์ฐ `useRouter`๋ `useRoute`๋ฅผ ์ฌ์ฉํ ํ์๊ฐ ์์ต๋๋ค. | ||
|
||
## ํ์ ๊ฐ๋ %{#navigation-guards}% | ||
## ๋ค๋น๊ฒ์ด์ ๊ฐ๋ %{#Navigation-Guards}% | ||
|
||
Vue Router๋ ์ ๋ฐ์ดํธ ๋ฐ ๋ฆฌ๋ธ ๊ฐ๋๋ฅผ ์ปดํฌ์ง์ API ๋ฉ์๋๋ก ๋ ธ์ถํ๋ฏ๋ก, `setup` ํจ์์์ ์ปดํฌ๋ํธ ๋ด ํ์ ๊ฐ๋๋ฅผ ๊ณ์ ์ฌ์ฉํ ์ ์์ต๋๋ค. | ||
Vue Router๋ ์ปดํฌ์ง์ API ํจ์๋ก ์ ๋ฐ์ดํธ์ ๋ ๋จ ๊ฐ๋๋ฅผ ๋ ธ์ถํฉ๋๋ค: | ||
|
||
```js | ||
```vue | ||
<script setup> | ||
import { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router' | ||
import { ref } from 'vue' | ||
export default { | ||
setup() { | ||
// `this`์ ์ ๊ทผ ๊ถํ์ด ์์ผ๋ฉฐ, beforeRouteLeave ์ต์ ๊ณผ ๋์ผ | ||
onBeforeRouteLeave((to, from) => { | ||
const answer = window.confirm( | ||
'์ ๋ง ๋ ๋์๊ฒ ์ต๋๊น? ์ ์ฅ๋์ง ์์ ๋ณ๊ฒฝ ์ฌํญ์ด ์์ต๋๋ค!' | ||
) | ||
// ํ์์ ์ทจ์ํ๊ณ ๊ฐ์ ํ์ด์ง์ ๋จธ๋ฌผ๊ธฐ | ||
if (!answer) return false | ||
}) | ||
|
||
const userData = ref() | ||
|
||
// `this`์ ์ ๊ทผ ๊ถํ์ด ์์ผ๋ฉฐ, beforeRouteUpdate ์ต์ ๊ณผ ๋์ผ | ||
onBeforeRouteUpdate(async (to, from) => { | ||
// ์ฟผ๋ฆฌ ๋๋ ํด์๊ฐ ๋ณ๊ฒฝ๋์์ ์ ์์ผ๋ฏ๋ก, ID๊ฐ ๋ณ๊ฒฝ๋ ๊ฒฝ์ฐ์๋ง ์ ์ ์ ๋ณด๋ฅผ ๊ฐ์ ธ์ค๊ธฐ. | ||
if (to.params.id !== from.params.id) { | ||
userData.value = await fetchUser(to.params.id) | ||
} | ||
}) | ||
}, | ||
} | ||
// beforeRouteLeave ์ต์ ๊ณผ ๊ฐ์ง๋ง `this`์ ๋ํ ์ ๊ทผ์ด ์์ต๋๋ค | ||
onBeforeRouteLeave((to, from) => { | ||
const answer = window.confirm( | ||
'์ ๋ง ํ์ด์ง๋ฅผ ๋ ๋์๊ฒ ์ต๋๊น? ์ ์ฅ๋์ง ์์ ๋ณ๊ฒฝ์ฌํญ์ด ์์ต๋๋ค!' | ||
) | ||
// ๋ค๋น๊ฒ์ด์ ์ ์ทจ์ํ๊ณ ๊ฐ์ ํ์ด์ง์ ๋จธ๋ญ ๋๋ค | ||
if (!answer) return false | ||
}) | ||
const userData = ref() | ||
// beforeRouteUpdate ์ต์ ๊ณผ ๊ฐ์ง๋ง `this`์ ๋ํ ์ ๊ทผ์ด ์์ต๋๋ค | ||
onBeforeRouteUpdate(async (to, from) => { | ||
// id๊ฐ ๋ณ๊ฒฝ๋ ๊ฒฝ์ฐ์๋ง ์ฌ์ฉ์๋ฅผ ๊ฐ์ ธ์ต๋๋ค | ||
if (to.params.id !== from.params.id) { | ||
userData.value = await fetchUser(to.params.id) | ||
} | ||
}) | ||
</script> | ||
``` | ||
|
||
์ปดํฌ์ง์ API ๊ฐ๋๋ `<router-view>`๋ก ๋ ๋๋ง๋ ๋ชจ๋ ์ปดํฌ๋ํธ์์๋ ์ฌ์ฉํ ์ ์์ผ๋ฏ๋ก, ๋ผ์ฐํธ ์ปดํฌ๋ํธ ๋ด์์๋ง ์ฌ์ฉํด์ผ ํ๋ ๊ฒ์ ์๋๋๋ค. | ||
์ปดํฌ์ง์ API ๊ฐ๋๋ `<router-view>`์ ์ํด ๋ ๋๋ง๋ ๋ชจ๋ ์ปดํฌ๋ํธ์์ ์ฌ์ฉํ ์ ์์ผ๋ฉฐ, ์ปดํฌ๋ํธ ๋ด ๊ฐ๋์ฒ๋ผ ๋ผ์ฐํธ ์ปดํฌ๋ํธ์์ ์ง์ ์ฌ์ฉํ ํ์๋ ์์ต๋๋ค. | ||
|
||
## `useLink` | ||
## `useLink` %{#useLink}% | ||
|
||
Vue ๋ผ์ฐํฐ๋ RouterLink์ ๋ด๋ถ ๋์์ ์ปดํฌ์ ๋ธ๋ก ๋ ธ์ถํฉ๋๋ค. ์ด๋ `RouterLink`์ props์ ๊ฐ์ ๋ฐ์ ๊ฐ์ฒด๋ฅผ ํ์ฉํ๊ณ low-level ์์ฑ์ ๋ ธ์ถํ์ฌ ์์ ๋ง์ `RouterLink` ์ปดํฌ๋ํธ๋ฅผ ๊ตฌ์ถํ๊ฑฐ๋ ์ฌ์ฉ์ ์ง์ ๋งํฌ๋ฅผ ์์ฑํฉ๋๋ค: | ||
Vue Router๋ RouterLink์ ๋ด๋ถ ๋์์ ์ปดํฌ์ ๋ธ๋ก ๋ ธ์ถํฉ๋๋ค. ์ด๋ `RouterLink`์ props์ ๊ฐ์ ๋ฐ์ํ ๊ฐ์ฒด๋ฅผ ๋ฐ์๋ค์ด๋ฉฐ, ์์ ๋ง์ `RouterLink` ์ปดํฌ๋ํธ๋ฅผ ๊ตฌ์ถํ๊ฑฐ๋ ์ฌ์ฉ์ ์ ์ ๋งํฌ๋ฅผ ์์ฑํ๊ธฐ ์ํ ์ ์์ค ์์ฑ๋ค์ ๋ ธ์ถํฉ๋๋ค: | ||
|
||
```js | ||
```vue | ||
<script setup> | ||
import { RouterLink, useLink } from 'vue-router' | ||
import { computed } from 'vue' | ||
export default { | ||
name: 'AppLink', | ||
|
||
props: { | ||
// TypeScript๋ฅผ ์ฌ์ฉํ๋ค๋ฉด, @ts-ignore ์ถ๊ฐ๊ฐ ํ์ํจ | ||
...RouterLink.props, | ||
inactiveClass: String, | ||
}, | ||
|
||
setup(props) { | ||
const { | ||
// ํ์ฉ๋ ๋ผ์ฐํธ(route) ๊ฐ์ฒด | ||
route, | ||
// ๋งํฌ์์ ์ฌ์ฉํ href | ||
href, | ||
// ๋งํฌ๊ฐ ํ์ฑ ์ํ์ธ์ง ๋ํ๋ด๋ boolean ํ์ ์ ๊ฐ ์ฐธ์กฐ | ||
isActive, | ||
// ๋งํฌ๊ฐ ์ ํํ ํ์ฑ ์ํ์ธ์ง ๋ํ๋ด๋ boolean ํ์ ์ ๊ฐ ์ฐธ์กฐ | ||
isExactActive, | ||
// ๋งํฌ๋ก ์ด๋ํ๋ ํจ์ | ||
navigate | ||
} = useLink(props) | ||
|
||
const isExternalLink = computed( | ||
() => typeof props.to === 'string' && props.to.startsWith('http') | ||
) | ||
|
||
return { isExternalLink, href, navigate, isActive } | ||
}, | ||
} | ||
const props = defineProps({ | ||
// TypeScript ์ฌ์ฉ ์ @ts-ignore ์ถ๊ฐ | ||
...RouterLink.props, | ||
inactiveClass: String, | ||
}) | ||
const { | ||
// ํด๊ฒฐ๋ ๋ผ์ฐํธ ๊ฐ์ฒด | ||
route, | ||
// ๋งํฌ์์ ์ฌ์ฉํ href | ||
href, | ||
// ๋งํฌ๊ฐ ํ์ฑํ๋์๋์ง ๋ํ๋ด๋ ๋ถ๋ฆฐ ref | ||
isActive, | ||
// ๋งํฌ๊ฐ ์ ํํ ํ์ฑํ๋์๋์ง ๋ํ๋ด๋ ๋ถ๋ฆฐ ref | ||
isExactActive, | ||
// ๋งํฌ๋ก ์ด๋ํ๋ ํจ์ | ||
navigate | ||
} = useLink(props) | ||
const isExternalLink = computed( | ||
() => typeof props.to === 'string' && props.to.startsWith('http') | ||
) | ||
</script> | ||
``` | ||
|
||
RouterLink์ `v-slot`์ `useLink` ์ปดํฌ์ ๋ธ๊ณผ ๋์ผํ ์์ฑ์ ๋ํ ์ก์ธ์ค๋ฅผ ์ ๊ณตํฉ๋๋ค. | ||
RouterLink์ `v-slot`์ `useLink` ์ปดํฌ์ ๋ธ๊ณผ ๋์ผํ ์์ฑ์ ์ ๊ทผํ ์ ์์ต๋๋ค. |
Oops, something went wrong.