vue에서 하위 경로로 이동하는 방법

Vue는 구성 요소 기반 접근 방식을 사용하여 애플리케이션을 구축하는 인기 있는 프런트 엔드 프레임워크입니다. Vue 라우터는 Vue에서 제공하는 플러그인으로, 애플리케이션을 여러 뷰로 쉽게 나누고 사용자가 뷰 간을 탐색할 수 있도록 해줍니다. Vue 라우터에서 각 뷰는 경로이며 각 경로는 여러 하위 경로를 가질 수 있습니다. 이 기사에서는 하위 경로를 점프하는 방법을 소개합니다.

1. 하위 경로 선언

Vue 라우터에서 하위 경로를 선언하려면 중첩 경로를 사용해야 합니다. 하위 경로를 선언하려면 상위 경로의 하위 필드를 사용하세요. 예:

const router = new VueRouter({
  routes: [
    {
      path: '/parent',
      component: Parent,
      children: [
        {
          path: 'child',
          component: Child
        }
      ]
    }
  ]
})

위 코드에서는 parent라는 상위 경로와 child라는 하위 경로를 선언합니다. 사용자가 /parent/child에 액세스하면 상위 및 하위 구성 요소가 렌더링됩니다.

2. Jump 하위 경로

Vue의 점프 라우팅은 $router 개체를 사용하여 라우터 링크 구성 요소 또는 프로그래밍 방식 탐색을 사용할 수 있습니다. 하위 경로를 점프할 때 전체 라우팅 경로를 제공해야 합니다. 예를 들어 위 예에서 하위 경로로 이동하려면 /parent/child의 전체 경로 경로를 제공해야 합니다.

라우터 링크 사용:

<router-link>跳转到子路由</router-link>

프로그래밍 방식 탐색 사용:

this.$router.push('/parent/child')

위 코드에서는 $router.push 메서드를 사용하여 경로로 이동합니다.

3. 프로그래밍 방식 탐색에서 매개변수 전달

실제로는 하위 경로로 점프하여 일부 매개변수를 전달해야 하는 경우가 많습니다. Vue에서는 프로그래밍 방식 탐색의 params 필드를 사용하여 매개변수를 전달할 수 있습니다. 예:

this.$router.push({ path: '/parent/child', params: { id: 1 }})

위 코드에서는 값이 1인 id 매개변수를 전달했습니다. 매개변수를 받는 하위 라우팅 컴포넌트에서는 this.$route.params를 통해 매개변수를 가져올 수 있습니다.

export default {
  mounted() {
    console.log(this.$route.params.id) // 输出1
  }
}

4. 결론

이 글에서는 Vue 라우팅에서 하위 경로를 점프하는 방법을 소개합니다. 하위 경로를 선언하는 방법, 라우터 링크 및 프로그래밍 방식 탐색을 사용하여 하위 경로로 이동하는 방법, 매개변수를 전달하는 방법을 다루었습니다. 이 글이 초보자들에게 도움이 되기를 바랍니다.

위 내용은 vue에서 하위 경로로 이동하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!