vue 라우터 메서드안에서 사용하기

문제점 설명 :

<button v-on:click="$router.push({ name: 'test' })">gogo1</button>

이렇게 만드는건 이미 배웠고 정상적으로 작동된다.

 

 

하지만 내가 원하는 기능은 메서드 안에서 라우터를 조정하는것이다..

조건에따라 다른 라우터를 연결하는 버튼을 만들고 싶어서였다.

 

  <button v-on:click="test()">gogo2</button>

여긴 템플릿

 

    const test = ()=>{

      router.push({ name: 'test' })

    }

이건 메서드..

 

this.$router.push~

self 머시기 다 써봤는데 안되더라.

 

 

구글링 졸라게 해보니 답이나온다.

 

먼저

 

import { useRouter, useRoute } from 'vue-router'

이렇게 라우터를 임포트해주고

    const router = useRouter();

    const route = useRoute();

이렇게 변수지정을 해준다.

 

그다음 메서드에서

 

    const test = ()=>{

      router.push({ name: 'test' })

    }

이렇게 써주면 원하는대로 작동되더라..

 

 

 

출처 : 

https://router.vuejs.org/guide/advanced/composition-api.html#accessing-the-router-and-current-route-inside-setup