프로그래밍 방식 탐색

다른 위치로 이동

컴포넌트 내에서 라우터에 접근하려면 router 속성을 사용

Composition API 는 useRouter() 를 호출하여 라우터에 접근

 

다른 URL로 이동하려면 router.push 를 사용 - 새 항목을 히스토리 스택으로 푸시, 사용자가 브라우저의 뒤로가기 버튼을 클릭하면 이전 URL 로 이동함

 

이것은 router-link 를 클릭할 때 내부적으로 호출되는 메서드이므로, router-link :to" . . . "를 클릭하는 것은 router.push(...) 를 호출하는 것과 가틍ㅁ

 

선언 방식 - <router-link :to=" ... " >

프로그래밍 방식 - router.push( . . . )

 

// 문자열 라우트
router.push('/users/eduardo')

// 라우트(path)를 나타낸 객체
router.push({ path: '/users/eduardo' })

// 파라미터 값이 있는 이름을 가진 라우트
router.push({ name: 'user', params: { username: 'eduardo' } })

// 쿼리(query) 사용, 이동할 라우트: /register?plan=private
router.push({ path: '/register', query: { plan: 'private' } })

// 해시(hash) 사용, 이동할 라우트: /about#team
router.push({ path: '/about', hash: '#team' })

 

* path 가 제공되면 params 가 무시됨, 대신 라우트에 name 을 제공하거나, 수동으로 파라미터를 포함한 전체 path 를 지정해줘야함. query의 경우, 위의 예제처럼 주의사항에 해당x

 

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

params 를 지정할 때 string number 또는 array (반복 가능한 파라미터일 경우) 를 제공해야함

다른 모든 유형 (ex. 객체, 불리언) 은 자동으로 문자열로 변환됨

선택적 파라미터의 경우, 빈 문자열( "" )또는 null 을 값으로 제공하여 제거할 수 있음

 

router-link 의 to 는 router.push 와 동일한 객체를 허용하므로 두 객체 모두 똑같은 규칙 적용

 

router.push 를 포함한 모든 탐색 메서드는 탐색이 완료될 때까지 기다렸다가 성공했는지 실패했는지 알 수 있도록 하는 Promise 를 반환. 

 

---

현재 위치 바꾸기

 

이것은 router.push 처럼 작동, 유일한 차이점은 새 히스토리 항목을 푸시하지 않고 탐색하는 것으로 현재 항목을 대채

선언방식 - <router-link :to=". . .">

프로그래밍 방식 - router.replace(. . .)

router.push에 전달되는 to 인수에 replace: ture 속성을 직접 추가하는 것도 가능

router.push({ path: '/home', replace: true })
// 이 둘은 동일함.
router.replace({ path: '/home' })

 

---

히스토리 이동

 

이 메서드는 window.history.go(n) 과 유사하게, 히스토리 스택에서 앞 또는 뒤로 이동할 단계를 나타내는 정수를 단일 인자로 사용

// `router.forward()`와 동일하게 앞으로 한 번 이동함.
router.go(1)

// `router.back()`과 동일하게 뒤로 한 번 이동함.
router.go(-1)

// 앞으로 3 번 이동함.
router.go(3)

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