117. 로그인 후 Main 페이지 이동 | this.$router.push('/main');

this.$router.push() 는 자바스크립트 레벨에서 이용하는 앵커 태그 역할

괄호 안에 URL 써주면됨

html에선 <router-link to="/main">

 

URL 뿐만 아니라

객체, 값, 쿼리도 넘길수 있음

---

다른 위치로 이동하는법

Vue 인스턴스 내에서 라우터 인스턴스에 $router. 따라서 페이지 전환을 할 수 있습니다 (this.$router.push.)

다른 URL로 이동하려면 router.push 사용하면 됩니다.

이 메서드는 새 항목을 기록 스택에 푸시하므로 사용자가 브라우저 뒤로 버튼을 클릭하면 이전 URL로 이동합니다.

a 를 클릭했을 때 내부적으로 호출되는 메서드 <router-link>이므로

클릭 <router-link :to="..."> 하는 것은 router.push 를 호출하는 것과 같습니다 

 

선언적 프로그래매틱

<router-link :to="...">

router.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' })

---

참고 : a 가 제공된 params경우 무시 되며 위의 예와 같이 의 경우가 아닙니다.

대신 경로의 를 제공 하거나 매개변수를 사용하여 전체를 수동으로 지정해야 합니다.

path, query, name, path

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

---

https://router.vuejs.org/guide/essentials/navigation.html#traverse-history

Programmatic Navigation | Vue Router