Vue Router에서 하위 경로를 사용하는 방법은 무엇입니까?

Vue Router에서 하위 경로를 어떻게 사용하나요?

Vue Router는 Vue.js에서 공식적으로 제공하는 라우팅 관리자로 프런트 엔드 페이지의 라우팅 기능을 구현하는 데 사용됩니다. 이를 통해 애플리케이션의 페이지 사이를 이동할 수 있으며 하위 경로의 중첩 사용을 지원합니다. 이 기사에서는 Vue Router에서 서브라우팅을 사용하는 방법을 자세히 소개하고 코드 예제를 통해 이를 보여줍니다.

Vue Router에서는 경로 구성 항목을 사용하여 라우팅 규칙을 정의할 수 있습니다. 경로 배열에서 하위 경로를 중첩으로 선언할 수 있습니다. 하위 경로는 보다 세분화된 페이지 점프를 달성하는 데 사용되는 상위 경로 아래의 하위 수준 경로 그룹을 나타냅니다.

다음은 하위 라우팅을 사용하는 코드 예제입니다.

// main.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
import Parent from './components/Parent.vue'
import Child from './components/Child.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    component: Parent,
    children: [
      {
        path: 'child',
        component: Child
      }
    ]
  }
]

const router = new VueRouter({
  routes
})

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

위 코드에서는 각각 상위 라우팅과 하위 라우팅에 해당하는 두 개의 구성 요소인 Parent와 Child를 정의합니다. 경로 배열에서는 하위 구성 항목을 사용하여 하위 경로를 선언합니다. 이 예에서 상위 경로의 경로는 '/'이고 하위 경로의 경로는 각각 Parent 및 Child 구성 요소에 해당하는 'child'입니다.

부모 구성 요소에서 자식 경로의 콘텐츠를 렌더링하려면 태그를 추가해야 합니다. 이 태그는 975b587bf85a482ea10b0a28848e78a4입니다. 상위 구성 요소의 템플릿에 975b587bf85a482ea10b0a28848e78a4 태그를 추가하면 하위 구성 요소가 이 위치에 렌더링됩니다.

다음은 상위 구성 요소의 코드 예입니다.

<!-- Parent.vue -->
<template>
  <div>
    <h2>父级路由</h2>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'Parent'
}
</script>

상위 구성 요소의 템플릿에는 제목과 같은 다른 콘텐츠를 추가할 수 있습니다. 그런 다음 975b587bf85a482ea10b0a28848e78a4 태그를 통해 하위 경로의 콘텐츠를 렌더링합니다. 이런 식으로 하위 경로에 해당하는 구성 요소가 상위 구성 요소에 표시됩니다.

다음은 하위 구성 요소의 코드 예입니다.

<!-- Child.vue -->
<template>
  <div>
    <h3>子级路由</h3>
    <p>这是子级路由的内容。</p>
  </div>
</template>

<script>
export default {
  name: 'Child'
}
</script>

하위 구성 요소의 템플릿에서 하위 경로의 내용을 사용자 정의할 수 있습니다. 이는 단순한 예일 뿐이며 실제 필요에 따라 더 복잡한 하위 라우팅 내용을 정의할 수 있습니다.

마지막으로 main.js의 VueRouter 생성자를 사용하여 라우팅 인스턴스를 생성하고 이전에 정의된 라우팅 규칙을 구성합니다. 그런 다음 Vue 인스턴스의 라우팅 인스턴스를 전달하고 $mount 메소드를 통해 Vue 인스턴스를 페이지에 마운트합니다.

이제 코드를 실행하고 효과를 확인할 수 있습니다. '/' 경로에 액세스하면 상위 경로 Parent의 콘텐츠가 표시되고 하위 경로 Child의 콘텐츠는 975b587bf85a482ea10b0a28848e78a4 태그 위치에 렌더링됩니다.

요약하자면 Vue Router의 하위 경로는 경로 배열의 하위 구성 항목을 통해 정의할 수 있습니다. 상위 경로는 975b587bf85a482ea10b0a28848e78a4 태그를 통해 하위 경로의 콘텐츠를 렌더링합니다. 실제 개발에서는 보다 복잡한 페이지 점프 및 구성 요소 중첩을 달성하기 위해 필요에 따라 하위 경로를 유연하게 사용할 수 있습니다.

이 글이 Vue Router의 서브 라우팅 기능을 이해하고 사용하는 데 도움이 되기를 바랍니다. 질문이나 공유할 사항이 있으면 댓글 영역에 남겨주세요.

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