[VueJS] 라우터(Vue Router) push/replace/go - 프로그래밍 방식 페이지 전환 사용하기

Programmatic Navigation

프로그래밍 방식 내비게이션은 <router-link>를 사용하여 선언적 내비게이션을 사용하기보다는 라우터의 인스턴스 메서드를 사용하여 프로그래밍으로 동일한 기능을 수행할 수 있는 방식이다.

 

개발을 하는 동안에 <router-link>만 사용하면 좋겠지만 그렇지 않은 경우도 상당히 많기 때문에 아마 Vue Router를 사용하게 된다면 이러한 방식을 사용하게 될 것이다.

 

만약 VueJS가 Options API를 사용하고 있다면 Vue 인스턴스 내부에서 this.$router를 통해 접근할 수 있겠지만,

요즘은 Composition API를 많이 사용하기 때문에 Composition API의 경우에는 useRouter()를 사용해서 접근한다.

(애초에 setup단계에서는 this접근이 불가능하기 때문에 Composition API는 use훅을 사용한다.)

 

프로그래밍 방식으로 사용하는 메서드는 크게 push/replace/go 메서드가 존재하는데, 하나하나 알아보도록 하자.

---

router.push()

다른 위치로 이동하는 메서드인 push()에 대해 알아보자.

push() 메서드와 일치하는 선언적 방식은 <router-link :to="..."> 와 일치한다.

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,
        },
      })
    }
  },
}

위에서 설명한 것 처럼 router에 접근하기 위해서는 useRouter()를 우선적으로 사용해야 한다.

 

push() 메서드를 사용하게 되면 히스토리 스택에 추가된다.

즉, 이동 경로가 그대로 쌓인다는 뜻이므로 뒤로 가기 버튼을 눌렀을 때 순차적으로 스택에 쌓였던 이전 페이지로 이동하게 된다. (쉽게 어떤 페이지 들어가고 나서 뒤로 가기로 빠져나오는 원리와 같다.)

 

push() 메서드에는 문자열이나 객체를 넣어서 사용할 수 있다.

// literal string path
router.push('/users/eduardo')

// object with path
router.push({ path: '/users/eduardo' })

// named route with params to let the router build the url
router.push({ name: 'user', params: { username: 'eduardo' } })

// with query, resulting in /register?plan=private
router.push({ path: '/register', query: { plan: 'private' } })

// with hash, resulting in /about#team
router.push({ path: '/about', hash: '#team' })

그리고 여기서 재미난 점은 query와 params의 차이다.

아래 예제를 통해 params를 사용할 경우 어떤 식으로 출력되는지 확인해보자.

const username = 'eduardo'
// we can manually build the url but we will have to handle the encoding ourselves
router.push(`/user/${username}`) // -> /user/eduardo
// same as
router.push({ path: `/user/${username}` }) // -> /user/eduardo
// if possible use `name` and `params` to benefit from automatic URL encoding
router.push({ name: 'user', params: { username } }) // -> /user/eduardo
// `params` cannot be used alongside `path`
router.push({ path: '/user', params: { username } }) // -> /user

매개변수(params)를 지정할 때, 문자열이나 숫자(또는 반복 가능한 매개변수의 경우 이러한 배열)를 제공해야 한다.

다른 유형(예: undefined, false 등)은 자동으로 문자열화되며, 선택적 매개변수의 경우 건너뛸 값으로 빈 문자열("")을 사용하면 된다고 한다.

---

router.replace()

동작 자체는 router.push() 메서드와 비슷하지만, 유일하게 다른 점은 히스토리 스택을 쌓지 않는다는 점이다.

뒤로 가기를 할 경우 원래 페이지로 돌아갈 수 없다는 말이다.

즉, 단순히 현재 페이지를 전환하는 게 router.replace() 메서드이다.

reaplce() 메서드와 일치하는 선언적 방식은 <router-link :to="..." replace>와 일치한다.

router.push({ path: '/home', replace: true })
// equivalent to
router.replace({ path: '/home' })

push() 메서드를 사용할 때 replace 속성을 true로 선언해 주거나, 직접 replace() 메서드를 사용하는 방법 역시 존재한다.

매개변수를 지정하여 활용하는 방법은 위에서 설명한 router.push()를 참고해보자.

---

router.go()

router.go() 메서드는 window.history.go(n)과 동일한 기능을 한다.

매개변수로 넘긴 숫자만큼 히스토리 스택에서 앞, 뒤 페이지로 이동하는 메서드이다.

// go forward by one record, the same as router.forward()
router.go(1)

// go back by one record, the same as router.back()
router.go(-1)

// go forward by 3 records
router.go(3)

// fails silently if there aren't that many records
router.go(-100)
router.go(100)

---

공식문서에서는 이 useRouter()로 사용하는 router.push, router.replace 그리고 router.go 메서드들이 window.history API의 메서드를 모방한다고 한다.

window.history.pushState, window.history.replaceState, window.history.go 메서드들이 해당한다.

---

참고: https://v3.router.vuejs.org/kr/guide/essentials/navigation.html

프로그래밍 방식 네비게이션 | Vue Router

참고: https://router.vuejs.org/guide/essentials/navigation.html#navigate-to-a-different-location

Programmatic Navigation | Vue Router