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

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

🪐선언적 방식과 프로그래밍 방식 비교

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

- <RouterLink>를 사용하여 선언적 네비게이션용 <a>태그를 사용하는 것 외에 라우터 인스턴스 메서드를 사용하여 페이지 이동 가능하다.

 

 

🪐router.push(url) 사용법

- push를 통해 다른 url로 이동 가능하다.

- 히스토리 스택에 넣어서 뒤로가기 시 이전 url로 이동한다.

- 사실 <router-link>의 내부 메소드라서 기능이 동일하다.

 

※ router.push 파라미터는 문자열 경로 또는 객체가 가능

(1) 리터럴 문자열 경로 → router.push('/users/tay')

(2) 경로가 있는 개체  → router.push({ path: '/users/tay' })

(3) 이름을 가지는 라우트  → router.push({ name: 'user', params: { username: 'tay' } })

(4) 쿼리와 함께 사용  → router.push({ path: '/register', query: { plan: 'private' } }) → register?plan=private
(5) 해시와 함께 사용  → router.push({ path: '/about', hash: '#team' }) →  /about#team

 

(6) URL을 수동으로 작성할 수 있지만 인코딩을 직접 처리

→ const username = 'tay'; router.push(`/user/${username}`)  →  /user/tay
(7) 위와 동일

→ const username = 'tay'; router.push({ path: `/user/${username}` }) → /user/tay

(8) 가능하면 `name`과 `params`를 사용하여 자동 URL 인코딩의 이점을 얻습니다.

→ const username = 'tay'; router.push({ name: 'user', params: { username } }) → /user/tay

(9) `params`는 `path`와 함께 사용할 수 없다.

→ const username = 'tay'; router.push({ path: '/user', params: { username } }) →  /user

 

 

🪐router.replace() 사용법

- router.push와 같은 역할이지만 새로운 히스토리 항목에 추가하지 않는다. 즉, 뒤로가기에 저장되지 않는다.

선언적 방식	프로그래밍 방식
<RouterLink :to='url' replace>	router.replace()

 

※ router.push 메소드에 replace 속성 추가 방식

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

// router.replace({ path: '/home' }) 기능적으로 똑같다.

 

 

🪐router.go(n) 사용법

- window.history.go(n) 과 비슷하게 히스토리 스택에서 앞으로 또는 뒤로 단계별로 이동

 

(1) 한 단계 앞으로 간다.

router.go(1)

// history.forward() 와 같음

 

(2) 한 단계 뒤로 간다. 

router.go(-1)

// history.back()와 같음

 

(3) 지정한 만큼의 기록이 없으면 자동으로 실패한다.

router.go(100)

// ==> 실패