Vue에서 this.$router 및this.$route의 차이 및push () 방법

2689 단어 vuethis.$router
관방 문서에는 이렇게 설명되어 있다.
라우터를 주입하면 모든 구성 요소에서this.$를 통과할 수 있습니다.router에서 공유기에 접근할 수도 있고,this.$를 통해 접근할 수도 있습니다.route 현재 라우팅 액세스
다음과 같이 이해할 수 있습니다.
this.$router는 전역적인 공유기 대상에 해당하며 많은 속성과 대상 (예를 들어history 대상) 을 포함하고 있으며, 모든 페이지에서push (), Replace (), go () 등 방법을 호출할 수 있습니다.
this.$루트는 현재 루트 대상을 나타냅니다. 모든 루트는 루트 대상이 있습니다. 국부적인 대상입니다. 대응하는name,path,params,query 등 속성을 얻을 수 있습니다.
push () 메서드 정보:
다른 URL을 찾으려면router를 사용하십시오.push 방법.이 방법은history 창고에 새로운 기록을 추가합니다. 따라서 사용자가 브라우저 뒤로 단추를 눌렀을 때 이전 URL로 돌아갑니다.
를 눌렀을 때, 이 방법은 내부에서 호출됩니다. 그러니까, 라우터를 호출하는 것과 같습니다.push(...).
push () 메서드 호출:

    // 
    this.$router.push('home')
 
    // 
    this.$router.push({path:'home'})
 
    // 
    this.$router.push({name:'user', params:{userId: '123'}})
 
    // ，  /register?plan=private
    this.$router.push({path:'register', query:{plan:private}})
주의: path를 제공하면params는 무시됩니다. 상기 예에서query는 이러한 상황에 속하지 않습니다.대신 다음 예에서 루트의name나 파라미터가 있는 온전한 path를 제공해야 합니다.

    const userId = '123';
 
    this.$router.push({path:`/user/${userId}`});  //->/user/123
 
    this.$router.push({name:'user', params:{userId}});  //->/user/123
 
    //  params  
    this.$router.push({path:'/user', params:{userId}});  //->/user
같은 규칙은router-link 구성 요소의 to 속성에도 적용됩니다.
요약:
params 전참,push 안에는name:'xxx'만 있을 수 있고path:'/xxx'는 될 수 없습니다. 왜냐하면 params는name로만 루트를 도입할 수 있기 때문입니다. 만약path라고 쓰면 수신 매개 변수 페이지는undefined입니다. 
라우팅 참조 방식:
1. 손으로 쓴 완전한 path:

    this.$router.push({path: `/user/${userId}`});
매개변수 가져오기:this.$route.params.userId 
2、params로 전달:

    this.$router.push({name:'user', params:{userId: '123'}});
매개변수 가져오기:this.$route.params.userId 
url 형식: url 매개 변수 없음, http:localhost:8080/#/user
3、query로 전달:

    this.$router.push({path:'/user', query:{userId: '123'}});
매개변수 가져오기:this.$route.query.userId 
url 형식: url 매개 변수, http:localhost:8080/#/user?userId=123
솔직히 말해서query는 get 요청에 해당하고 페이지가 넘어갈 때 주소 표시줄에서 요청 파라미터를 볼 수 있으며,params는post 요청에 해당하며, 파라미터는 주소 표시줄에 표시되지 않습니다.
중첩된 경로는/로 시작하는 루트 경로가 됩니다.이것은 플러그인 경로를 설정하지 않고 플러그인 구성 요소를 충분히 사용할 수 있도록 합니다.
총결산
이 Vue에서this.$에 관하여router 및this.$route의 차이점과push() 방법에 대한 글은 여기에 소개되어 있습니다. 더 많은 관련 Vue 중this.$router 및this.$루트 구별 내용은 저희 이전 글을 검색하거나 아래 관련 글을 계속 찾아보세요. 앞으로 많이 사랑해 주세요!
JavaScript 원본 데이터 유형 Symbol 자세히 보기
JavaScript 초보자가 범하기 쉬운 몇 가지 오류

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage