vue의 상위 경로에 하위 경로를 표시하는 방법

Vue.js는 단일 페이지 웹 애플리케이션을 구축하기 위한 최신 JavaScript 프레임워크입니다. 라우팅과 같은 몇 가지 유용한 기능을 제공합니다. Vue Router를 사용하면 애플리케이션의 탐색 및 상태를 쉽게 관리할 수 있습니다.

Vue 라우터에서는 경로가 트리 구조로 구성됩니다. 상위 경로와 일부 하위 경로를 만든 다음 함께 그룹화합니다. 이런 방식으로 서로 다른 페이지 부분을 함께 구성하고 이를 기본 애플리케이션의 서로 다른 페이지에 표시할 수 있습니다.

일반적으로 하위 경로는 상위 경로에 표시되지 않습니다. 대신, 우리는 그것들을 함께 결합하고 궁극적으로 기본 애플리케이션의 루트 경로에 렌더링합니다. 이 프로세스는 Vue 라우팅의 "명명된 뷰" 기능을 통해 수행할 수 있습니다.

Named Views는 라우팅된 단일 구성 요소에서 여러 뷰를 렌더링할 수 있는 Vue Router 기능입니다. 이 경우 각 보기에는 고유한 이름이 있으며 상위 구성 요소에서 사용할 수 있습니다.

명명된 뷰를 사용하면 상위 라우팅 구성 요소 내의 특정 위치에 하위 라우팅 구성 요소를 렌더링할 수 있습니다. 이 위치는 동일한 이름을 가진 명명된 뷰 태그로 식별됩니다.

예를 들어 홈, 정보, 연락처의 세 가지 하위 경로가 있는 상위 경로가 있다고 가정합니다. 다음 코드를 사용하여 이들을 결합할 수 있습니다:

<template>
  <div>
    <header>
      <router-link to="/">Home</router-link>
      <router-link to="/about">About</router-link>
      <router-link to="/contact">Contact</router-link>
    </header>

    <main>
      <router-view name="home"></router-view>
      <router-view name="about"></router-view>
      <router-view name="contact"></router-view>
    </main>
  </div>
</template>

<script>
export default {
  name: 'ParentComponent',
  components: {}
}
</script>

위 코드에서는 세 개의 명명된 뷰 태그를 사용하고 이름을 "home", "about" 및 "contact"로 지정했습니다. 이 이름은 props를 사용하여 하위 구성 요소에 전달되고 하위 구성 요소 내에서 사용될 수 있습니다.

그런 다음 하위 구성 요소에서 경로 구성 개체를 사용하여 어떤 명명된 뷰에서 어떤 구성 요소를 렌더링해야 하는지 지정할 수 있습니다. 예:

const router = new VueRouter({
  routes: [
    {
      path: '/',
      components: {
        default: HomeComponent,
        home: SidebarComponent
      }
    },
    {
      path: '/about',
      components: {
        default: AboutComponent,
        about: SidebarComponent
      }
    },
    {
      path: '/contact',
      components: {
        default: ContactComponent,
        contact: SidebarComponent
      }
    }
  ]
})

위 코드에서는 각 하위 경로에 대해 명명된 뷰를 지정했습니다. 예를 들어, "home" 경로에서는 "sidebar" 구성 요소를 사용하고 이를 "home" 명명된 뷰에 배치했습니다. 마찬가지로 "about" 및 "contact" 경로에서 이를 사용하고 응답의 명명된 뷰에 넣습니다.

결론적으로 Vue.js의 라우터를 사용하면 애플리케이션에서 탐색 및 상태를 쉽게 관리할 수 있습니다. 명명된 뷰를 사용하면 상위 라우팅 구성 요소의 특정 위치에 하위 라우팅 구성 요소를 렌더링할 수 있습니다. 이를 통해 복잡한 단일 페이지 애플리케이션을 만들고 명확하고 체계적인 방식으로 관리할 수 있습니다.

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