Vue 하위 라우팅을 구성하는 방법

Vue는 대화형 웹 애플리케이션을 구축하는 데 널리 사용되는 JavaScript 프레임워크입니다. Vue의 라우팅 기능을 사용하면 단일 페이지 애플리케이션(SPA)을 만들 수 있으며, 서로 다른 경로가 서로 다른 구성 요소에 해당하고 지정된 콘텐츠가 구성 요소에 렌더링됩니다. 하위 경로는 다른 경로 내에 중첩될 수 있는 Vue 라우팅의 특수한 유형의 라우팅입니다. 이 기사에서는 Vue에서 하위 경로를 구성하는 방법을 소개합니다.

먼저 Vue 및 관련 종속성이 설치되어 있는지 확인해야 합니다. Vue CLI를 사용하여 새 프로젝트를 만드는 것이 가장 좋습니다. 다음으로 Vue 구성 요소를 만들고 경로를 정의해야 합니다.

상위 경로 정의
상위 구성 요소에 경로(일반적으로 루트 경로 /)를 정의하여 하위 구성 요소에 대한 컨테이너를 제공합니다.

// src/router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('../views/Home.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

하위 경로 정의
그런 다음 상위 구성 요소의 하위 구성 요소를 가리키는 경로를 만듭니다.

// src/router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('../views/Home.vue'),
    children: [
      {
        path: 'about',
        name: 'About',
        component: () => import('../views/About.vue')
      }
    ]
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

이 예에서 "/"는 홈 구성 요소를 가리키는 루트 경로입니다. About 구성 요소를 가리키는 "/about"이라는 Home 구성 요소에 대한 하위 경로를 만들었습니다.

상위 구성 요소 템플릿에 하위 구성 요소 컨테이너 추가
Home 구성 요소의 템플릿에서 하위 구성 요소를 렌더링하려면 자리 표시자 컨테이너를 추가해야 합니다.

<template>
  <div>
    <h1>Home</h1>
    <router-view></router-view>
  </div>
</template>

이 "router-view" 지시문은 하위 경로를 통해 지정된 구성 요소를 표시하는 하위 구성 요소 컨테이너입니다.

하위 구성 요소 템플릿에 콘텐츠 추가
About 구성 요소의 템플릿에 내용을 표시하기 위해 일부 콘텐츠를 추가할 수 있습니다.

<template>
  <div>
    <h1>About</h1>
    <p>This is an about page.</p>
  </div>
</template>

이제 Vue 서브 라우터를 성공적으로 구성했습니다. 제대로 표시되는지 테스트해 보세요.

요약
Vue 하위 라우팅을 구성하는 세 가지 기본 단계가 있습니다. 이러한 단계에는 다음이 포함됩니다.

상위 경로 정의: 루트 경로에서 상위 구성 요소를 선언하고 해당 경로를 이 구성 요소로 탐색합니다.

하위 경로 정의: 상위 구성 요소의 하위 구성 요소에 대한 라우팅 지점을 생성합니다.

상위 구성 요소 템플릿에 하위 구성 요소 컨테이너 추가: 하위 구성 요소를 자리 표시자 요소에 삽입합니다.

하위 구성 요소 템플릿에 콘텐츠 추가: 하위 구성 요소의 기능을 보여줄 수 있는 콘텐츠를 제공합니다.

최종 알림: Vue에서 하위 라우팅을 사용할 때 경로를 올바르게 유지해야 합니다. 경로는 슬래시(/)로 시작하는 상위 구성 요소에서 시작해야 합니다.

위 내용은 Vue 하위 라우팅을 구성하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!