vue에서 하위 경로를 설정하는 방법

Vue는 MVVM 패턴을 기반으로 설계된 인기 있는 JavaScript 프레임워크로, 웹 애플리케이션을 개발하는 간단하고 유연하며 효율적인 방법을 제공합니다. Vue의 라우팅 메커니즘을 통해 개발자는 여러 페이지는 물론 페이지 간의 상태 및 상호 작용을 쉽게 관리할 수 있습니다. 이 기사에서는 웹 애플리케이션을 더 잘 관리하고 구성하기 위해 Vue에서 하위 경로를 설정하는 방법을 소개합니다.

1. Vue 서브라우팅이란 무엇인가요?

Vue의 라우팅 구성 요소에는 하나 이상의 하위 구성 요소가 포함될 수 있습니다. 하위 라우팅은 상위 라우팅 라우팅 구성이 여러 하위 라우팅 구성을 가질 수 있음을 의미합니다. Vue의 라우팅 시스템에서 하위 경로는 중첩 가능합니다. 즉, 하위 경로가 자체 하위 경로를 가질 수 있으므로 애플리케이션의 다양한 페이지를 더 잘 구성하고 관리할 수 있습니다.

2. Vue 하위 라우팅을 설정하는 방법은 무엇입니까?

1. Vue Router에서 상위 경로 정의

먼저 Vue Router에서 상위 경로를 정의해야 합니다. 상위 경로에는 여러 하위 경로가 포함될 수 있습니다. Vue Router 코드를 사용하여 상위 경로를 정의할 수 있습니다.

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import ParentComp from './views/ParentComp.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/parent',
      name: 'parentComp',
      component: ParentComp
    }
  ]
})

위 코드에서는 두 개의 경로가 정의됩니다. 하나는 루트 경로이고 다른 하나는 상위 경로입니다. 상위 경로의 경로는 "/parent"입니다.

2. 상위 경로의 구성 요소에 하위 경로를 추가합니다

그런 다음 상위 경로의 구성 요소에 하위 경로를 추가해야 합니다. Vue Router의 중첩 라우팅을 사용하여 하위 경로를 추가할 수 있습니다. 중첩 라우팅은 상위 라우팅의 구성 요소에 하위 라우팅 구성을 배치합니다. 중첩 라우팅의 정의에는 경로, 이름 및 구성 요소가 포함됩니다. 예:

<template>
  <div class="parent-comp">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'ParentComp',
  components: {
    ChildComp1: () => import('../components/ChildComp1.vue'),
    ChildComp2: () => import('../components/ChildComp2.vue')
  },
  data () {
    return {}
  },
  children: [
    {
      path: 'childcomp1',
      name: 'childcomp1',
      component: 'ChildComp1'
    },
    {
      path: 'childcomp2',
      name: 'childcomp2',
      component: 'ChildComp2'
    }
  ]
}
</script>

<style scoped>
.parent-comp {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
</style>

위 코드에서는 ParentComp라는 상위 구성 요소가 정의됩니다. 두 개의 하위 경로 정의가 포함되어 있습니다. 하위 라우팅 구성 요소의 이름은 ChildComp1 및 ChildComp2이고 경로는 각각 "/parent/childcomp1" 및 "/parent/childcomp2"입니다.

3. 상위 구성 요소에 하위 구성 요소 사용

마지막으로 해당 하위 라우팅 페이지가 상위 구성 요소에 표시될 수 있도록 상위 구성 요소에서 하위 구성 요소를 사용해야 합니다. Vue Router의 구성요소를 사용하여 현재 경로 아래에 구성요소를 표시할 수 있습니다. 다음과 같이 상위 구성 요소의 템플릿에 구성 요소를 추가할 수 있습니다.

<template>
  <div class="parent-comp">
    <router-view></router-view>
  </div>
</template>

이 방법으로 브라우저에서 "/parent/childcomp1" 및 "/parent/childcomp2"에 액세스하면 ChildComp1 및 ChildComp2 구성 요소가 각각 표시됩니다.

3. 요약

Vue 라우터는 특히 하위 경로 처리에 매우 유연한 경로 관리 방법을 제공합니다. Vue 라우팅에서 서브 라우팅 메커니즘을 합리적으로 사용함으로써 Vue 애플리케이션의 다양한 페이지를 더 잘 구성하고 관리할 수 있으며 웹 애플리케이션의 확장성과 유지 관리 가능성을 향상시킬 수 있습니다.

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