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>