VueRouter의 Programmatic Navivation 파헤치기

router.push(...)

이전까지 우리는 <router-link>를 이용한 탐색 방법을 사용했습니다.
하지만, javascript에서도 window.loacation이 있듯이 프로그래밍 방식으로 페이지를 탐색 할 수 있습니다.

한번 비교해볼까요??

선언 방식	프로그래밍 방식
<router-link :to="...">	router.push(...)

그럼 한번 어떻게 자유분방하게 사용할 수 있는지 예시를 보면서 생각해 보도록 합시다.

// String route
router.push('/users/james')

// route(path)를 나타낸 Object
router.push({ path: '/usersjames' })

// parameter가 존재하는 이름을 가진 route
router.push({ name: 'user', parmas: { username: 'james' } })

// query를 사용, 이동할 route: /register?plan=private
router.push({ path: '/register', query: { plan: 'private' } })

// hash를 사용, 이동할 rotue: /about#team
router.push({ path: 'about', hash:'team' })

 

이 때, 유의해야할 부분이 있습니다.

query의 경우는 무관하지만, params의 경우 path가 제공되면 무시됩니다.
따라서 params에 데이터를 담아 넘기려고한다면, path가 아닌 name을 제공하거나 수동으로 path에 지정해서 넘겨주어야 합니다.

const username = 'eduardo'
// URL을 직접 만들 수 있지만, 인코딩을 직접 처리해야 함.
router.push(`/user/${username}`) // -> /user/eduardo
// 위와 동일함.
router.push({ path: `/user/${username}` }) // -> /user/eduardo
// 가급적 `name` 및 `params` 사용을 추천, 자동으로 URL을 인코딩.
router.push({ name: 'user', params: { username } }) // -> /user/eduardo
// `params`는 `path`와 함께 사용할 수 없음.
router.push({ path: '/user', params: { username } }) // -> /user

router.replace(...)

router.replace()메서드는 router.push()처럼 동작합니다.
차이점이라면, 히스토리에 스택을 쌓지 않는다는 것입니다.

히스토리에 스택을 쌓지 않는다.라는 말이 무슨 말일까요??

 

뒤로가기를 생각해 봅시다.

 

보통 뒤로가기를 누르면 바로 직전에 있었던 페이지화면을 노출시키게 됩니다.
이것은 이전 페이지의 히스토리 스택을 쌓았기 때문에 가능한 것입니다.

그럼 히스토리에 스택을 쌓지 않는다.라는 의미는??

현재 페이지에서 다른 페이지로 이동할 경우, 현재 페이지에 대한 히스토리를 스택에 쌓지 않았다는 것을 의미합니다.

그러면 어떻게 동작할까요 ??

 

바로!! 뒤로가기를 눌렀을 경우, 이전!!! 페이지가아니 이전의 이전!! 페이지가 로드 되는 것이죠.

우리가 접속했던 페이지는 Main, Login, News이라는 순서로 들렸다고 가정해 봅시다.
만약 현재 우리는 News페이지에 위치하고 있습니다.

• router.push('/News')로 이동하고 이전 페이지로 이동할 경우 Login으로 이동
• router.replace('/News')로 이동하고 이전 페이지로 이동할 경우 Main으로 이동

이해가 되셨나요??

그럼 사용방법을 알아 보겠습니다.

// push를 사용해 replace속성값을 부여하는 경우
router.push({ path: '/News', replace: true })
// replace를 사용하는 경우
router.replace({ path: '/News' })

router.go(...)

router.fo(...)메서드는 window.history.go(...)와 유사하게 동작합니다.
히스토리 스택에서 앞 or 뒤로 이동할 단계의 인자를 숫자로 받습니다.

// 앞으로 한번 이동; router.forward()와 동일
router.go(1)
// 뒤로 한번 이동; router.back()와 동일
router.go(-1)
// 앞으로 세번 이동
router.go(3)

// 이동 가능한 값을 초과하는 경우 동작하지 않음(단, 에러를 발생시키진 않음)
router.go(100)
router.go(-100)

---

참고사항

각 메서드들은 window.history하위 메서드들과 비슷하게 동작합니다.
브라우저 히스토리 API에 익숙하다면, Vue Router의 히스토리를 조작하는데 용이할겁니다.

• router.push(...) -> window.history.pushState(...)
• router.replace(...) -> window.history.replaceState(...)
• router.go(...) -> window.history.go(...)