Vue2까지의 Options API에서는 this.$router와 같이 this를 통해 라우터 객체에 액세스했습니다. 그러나, Composition API의 setup 메소드내에서는 this 에 액세스 할 수 없습니다. 그러므로 지금까지와는 다른 접근 방식으로 접근해야 합니다.

useRouter() · useRoute()로 바꾸기

라우터 개체를 얻으려면 vue-rouer에서 useRouter 또는 useRoute 함수를 가져옵니다. 각 함수는 다음과 같이 대응합니다.


Options API
Composition API


this.$router
useRouter

this.$route
useRoute

 <script lang="ts"> import { defineComponent } from 'vue' import { useRoute, useRouter } from 'vue-router' export default defineComponent({ setup() { const router = useRouter() const route = useRoute() const fetch = () => { const { id } = route.params store.getTodo(id) } const goHome = () => { router.push('/') } return { goHome, } }, }) </script> 

useRoute() 함수에서 가져올 수 있습니다.

템플릿 내에서 지금까지와 같이 route , $router 에 액세스할 수 있습니다. 그러므로 $route 또는 router 객체를 return 할 필요가 없습니다.

setup 메소드 밖에서는 액세스 할 수 없다

앞서 설명한 $route 함수는 범용적으로 사용할 수 있을 것 같기 때문에 Composition API의 유의가 되어 다른 파일로 분할해 보고 싶은 곳입니다. 이 함수를 goHome 에 넣고 거기에서 호출하도록 변경해 보겠습니다.

src/composable/router/index.ts

import router from '@/router' import { useRouter } from 'vue-router' const router = useRouter() export const goHome = () => { router.push('/') } 

somePage.vue

<template> <button @click="goHome">トップへ戻る</button> </template> <script lang="ts"> import { defineComponent } from 'vue' import { goHome } from '@/composables/router' export default defineComponent({ setup() { return { goHome, } }, }) </script> 

버튼을 눌러 봐도, 생각에 반해 반응해 주지 않습니다. 콘솔 에러를 보면, 아무래도 src/composable/router/index.ts 로부터 얻은 useRouter() 오브젝트가 router 로 되어 있는 것 같습니다.

컴포넌트 내 네비게이션 가드

네비게이션 가드도 마찬가지로 undefined 에서 함수를 가져와서 사용합니다.

Opsitions API에서 vue-router에 해당하는 것은 제공되지 않는 것 같습니다.


Options API
Composition API


beforeRouteEnter
-

beforeRouteUpdate
onBeforeRouteLeave

beforeRouteLeave
onBeforeRouteLeave

<script lang="ts"> import { defineComponent } from 'vue' import { onBeforeRouteLeave, onBeforeRouteUpdate, } from 'vue-router' export default defineComponent({ setup() { onBeforeRouteLeave((to, from) => { //  }) onBeforeRouteUpdate((to, from) => { //  }) }, }) </script>