vue-router 의 hooks 용법 상세 설명

Vue 3 는 아직 공식 적 으로 발표 되 지 않 았 지만 신기 술 을 사랑 하 는 저 는 제 마음 을 억 누 르 지 못 하고 작은 프로젝트 에서 사용 하기 시 작 했 습 니 다.
이 에 따라 저 는 Vue 3 의 비계 프로젝트 를 만 들 었 습 니 다.이런 방식 으로 만 든 비계 프로젝트 는 vue 만 새로운 것 이 아니 라 vue-router,vuex 도 최신 입 니 다.
package.json 의 그림 을 캡 처 해 드 리 겠 습 니 다.

vue-router 와 vuex 가 모두 4.0 시 대 를 열 었 음 을 볼 수 있 습 니 다!
그러나 사실 나 는 vue-router 4.0 의 새로운 용법 같은 것 을 알 아 본 적 이 없다.왜냐하면 나 는 vue 3.0 이 이미 베타 버 전에 진 행 된 것 처럼 큰 변동 이 없 을 것 이 라 고 생각 하기 때문이다.
vue-router 4.0 은 알파 의 단계 이기 때문에 지금 배 우 는 것 은 시기상조 라 고 생각 합 니 다.하지만 그것 뿐 이 야!하마터면 참극 을 빚 을 뻔 했다.
구형 vue+vue-router 의 사용 방식
만약 에 경로 에서 동적 인 파 라 메 터 를 정의 하면 보통 이렇게 씁 니 다.

{
 path: '/:id'
}

그리고 프로 그래 밍 내 비게 이 션 을 사용 할 때 보통 이렇게 쓴다.

this.$router.push('/123')

구성 요소 에서 이 인 자 를 이렇게 가 져 옵 니 다:

this.$route.params.id

내 가 생각 하 는 새 vue+vue-router 의 사용 방식
vue 3.0 의 Composition API 에 this 가 없 기 때문에 구성 요소 인 스 턴 스 를 가 져 오 는 방식 으로$route 를 가 져 올 생각 입 니 다.

import { defineComponent, getCurrentInstance } from 'vue'

export default defineComponent((props, context) => {
 const { ctx } = getCurrentInstance()
 
 console.log(ctx.$route)
})

인쇄 된 게 undefined 인 줄 몰랐어!
이것 은 어떻게 된 일 입 니까?
그래서 나 는 ctx(ctx 는 현재 구성 요소 컨 텍스트)를 다시 인쇄 했다.

$가 없 는 필드 는 내 가 구성 요소 에서 정의 한 변수 입 니 다.$를 가 진 것 은 vue 내 장 된 것 입 니 다.한참 을 찾 았 더 니$route 가 없 었 습 니 다.$router 만 남 았 습 니 다.vue-router 4.0 은 현재 경로 정 보 를$router 로 옮 겼 을 것 입 니 다.
추측 을 가지 고 나 는$router 를 시 켰 다.

currentRoute! 이름 을 보면 얘 인 것 같 아!그래서 나 는:

import { defineComponent, getCurrentInstance } from 'vue'

export default defineComponent((props, context) => {
 const { ctx } = getCurrentInstance()
 
 console.log(ctx.$router.currentRoute.value.params.id)
})

역시 획득 했다!신 난다!
실제 새 vue+vue-router 용법
다음 과정 에서 나 는 ctx.$router 로 원래 의 this.$router 를 대 체 했 고,ctx.$router.currentRoute.value 로 원래 의 this.$route 를 대체 했다.
비록 다음 진도 에서 어떠한 bug 도 나타 나 지 않 았 지만 프로그램 은 내 가 생각 하 는 대로 실행 되 었 다.
그러나 프로젝트 포장 후 예상 치 못 한 bug 가 발생 했 습 니 다.경로 전환 을 할 때 undefined 에 push 가 없 는 오 류 를 신 고 했 습 니 다.
이상 하 다.개발 단계 에 서 는 절차 가 잘못 되 지 않 았 는데 왜 포장 만 하면 안 되 지?다년간 의 개발 경험 에 의 해 나 는 곧 vue-router 의 잘못 이라는 것 을 알 게 되 었 다.
설마 이렇게 쓰 는 것 이 틀린 것 입 니까?그런데 저 는 ctx 를 인쇄 했 습 니 다.그 안에$router 가 있 고$router 안에 currentRoute 가 있 습 니 다.currentRoute 안에 value 가 있 는데 value 안에 params 가 있 고 params 안에 제 가 조금 만 열 면 전 달 된 인 자 를 볼 수 있 습 니 다.

vue-router 의 bug 일 것 입 니 다.역시 알파 단계 의 결과 물 은 믿 을 수 없습니다.저 는 새로운 vue 비계 프로젝트 를 사용 한 것 을 후회 하기 시 작 했 습 니 다.
vue-router 의 hooks
그런데 이때 제 가 갑자기 영광 이 나 타 났 습 니 다.vue 3 는 react hooks 의 깨 우 침 을 받 아 Composition API 가 생 겼 지 않 습 니까?
그럼 vue-router 도 react-router 의 깨 우 침 을 받 을 것 같 습 니 다!
다행히 나 는 react 를 배 운 적 이 있 는데,과연 기술 이 몸 을 누 르 지 않 는 구나!아마 안에 useXxx 가 있 을 거 예요.이렇게:

import 
{ 
useXxx 
}
 from 'vue-router'

그럼 뭘 사용 해 야 되 지?이치대로라면 가능 한 한 이전의 API 와 일정한 관 계 를 유지 할 것 입 니 다.아마도 useRoute 와 useRouter 일 것 입 니 다!
나의 생각 을 검증 하기 위해,나 는 node 를 열 었 다.modules 에서 vue-router 의 원본 코드 를 찾 았 습 니 다:

아니 나 다 를 까,2454 번 과 2455 번 줄 에서 나 는 그것 이 useRoute 와 useRouter 를 도 출 한 것 을 발견 했다.그러면 그것 이다.

import { defineComponent } from 'vue'
import { useRoute, useRouter } from 'vue-router'

export default defineComponent(_ => {
 const route = useRoute()
 const router = useRouter()

 console.log(route.params.id)
 router.push('/xxx/xxx')
})

이런 방식 을 사용 하면 경로 전환 에 성공 할 수 있 을 뿐만 아니 라 경로 에서 전 달 된 매개 변 수 를 얻 을 수 있 습 니 다.이번에 다시 포장 해 보 았 는데 과연 이전의 그 보고 가 틀 리 지 않 았 습 니 다.
결어
앞으로 vue 온 가족 통 이 전 국민 hooks 의 시 대 를 열 것 같 습 니 다.소스 코드 를 뒤 져 보 는 동시에 저 는 그들 이 예 시 를 vue-router/playground 폴 더 에 썼 다 는 것 을 알 게 되 었 습 니 다.그 중에서 저 는 재 미 있 는 용법 을 발 견 했 습 니 다.
시간 이 있 으 면 자세히 연구 해서 더 깊이 있 는 글 을 보 여 드 리 겠 습 니 다.물론 제 가 새로운 글 을 내 는 것 을 기다 리 지 못 하 는 동료 가 있다 면 vue-router-next 의 github 주소 로 바로 들 어 갈 수 있 습 니 다.
오늘 새벽 Vue 3 베타 버 전이 충격 적 으로 발표 되 었 는데 비계 프로젝트 를 공개 적 으로 지지 하 다 니!
그것 의 예 는 모두 플레이 그라운드 라 는 폴 더 아래 놓 여 있 습 니 다.연구 가 이 루어 진 후에 더욱 깊이 있 는 글 이 나 오 기 를 기대 합 니 다!
vue-router 의 hooks 용법 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.vue-router hooks 용법 에 관 한 내용 은 예전 의 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 도 많은 응원 부 탁 드 리 겠 습 니 다!