반응형
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
반응형
'vue.js > vue.js 2' 카테고리의 다른 글
119. 로그아웃 기능 구현 | mutations에 clearUsernmae 함수 추가 (0) | 2023.01.24 |
---|---|
118. 로그인 후 처리 | 컴포넌트 간 데이터 전달방법 3가지 | vuex store 사용 (0) | 2023.01.24 |
116. 사용자 폼 유효성 검사 | email 방식인지 체크 | :disabled="!isUsernameValid || !password" (0) | 2023.01.18 |
115. 에러 메시지 출력 및 에러 피드백 표시 방법 (0) | 2022.11.22 |
114. 네트워크 에러 확인 방법과 에러 처리 코드 구현 | async & await 에러 처리 방법 (0) | 2022.10.17 |