vue의 $router 및 $route에 대한 간략한 소개(예제 포함)

이 글은 Vue의 $router 및 $route에 대한 간략한 소개를 제공합니다(예제 포함). 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

루팅의 기본 개념

루트, 루트입니다.

{ path: '/home', component: Home }

routes는 경로의 집합입니다.

const routes = [
  { path: '/home', component: Home },
  { path: '/about', component: About }
]

라우터는 경로 그룹을 관리하는 컨테이너 또는 메커니즘으로 이해될 수 있습니다. 간단히 말해서, 라우팅은 URL과 기능만 매핑합니다. URL을 받은 후 라우팅 매핑 테이블에서 해당 기능을 검색합니다. 이 프로세스는 라우터에서 처리됩니다.

    const router = new VueRouter({
          routes // routes: routes 的简写
    })

VUE에서

$route는 이름, 경로, 쿼리, 매개변수 등을 얻을 수 있는 현재 라우터 점프 객체입니다.

$router는 VueRouter 인스턴스입니다. 다른 URL로 이동하려면 $router.push 메소드를 사용하세요. 이전 기록으로 돌아가려면 $router.go 메소드를 사용하세요. 위에서 언급했듯이 여기서 $router는 라우팅 점프를 관리합니다. 영어로 er의 어미는 일종의 사람을 나타냅니다. 여기서는 경로가 어디로 가는지(push, go) 제어하는 ​​관리자로 상상할 수 있습니다. 기억하다.

경로 점프

1 전체 경로를 직접 작성할 수 있습니다:

this.$router.push({path:`/user/${userId}`})

이 방법을 사용하려면 경로

{
     path: '/user/:userId',
     name: '***',
     component: ***
   }

에서 다음 구성이 필요합니다. 매개변수를 받는 방법은 this.$route.params.userId입니다.

2 params를 사용하여 전달할 수도 있습니다.

this.$router.push({name:'Login',params:{id:'leelei'}})
//不带参数 变成 ip/login

3 쿼리를 사용하여 전달할 수도 있습니다.

this.$router.push({path:'/login',query:{id:'leelei'})
//带查询参数变成 ip/login?id=leelei
//带斜杠/代表从根目录出发，不会嵌套之前的路径

query 매개변수는 경로용이고 params 매개변수는 이름용입니다. . 매개변수를 수신하는 방법은 유사합니다. . this.$route.query.and this.$route.params.

이 URL은 점프 URL일 뿐이라는 점에 유의하세요. 이 URL로 점프할 때 표시되는 구성요소는 경로를 구성해야 합니다. 라우터 점프와 라벨 점프의 규칙은 유사합니다.

참고할 사항

쿼리를 사용하여 매개변수를 전달하는 경우 매개변수를 전달하기 위해 매개변수를 사용하는 경우와 유사하게 브라우저의 URL 표시줄에 전달된 매개변수가 표시됩니다. 게시물 요청.

path가 제공되면 params는 무시되지만(즉, params를 사용하여 매개변수를 전달하려면 name을 사용해야 함) 쿼리의 경우에는 그렇지 않습니다. 전체 경로와 쿼리 매개변수를 사용하여 전달하는 경우 페이지를 새로 고칠 때 경로에서 전달된 매개변수가 손실되지 않습니다.

router.push와 router.replace의 차이점은 기록에 새로운 기록을 추가하는 것이 아니라 현재 기록을 교체한다는 점입니다. 즉, 교체를 사용하여 점프한 웹페이지의 '뒤로' 버튼을 클릭할 수 없습니다.

위 내용은 vue의 $router 및 $route에 대한 간략한 소개(예제 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!