Vue 레이아웃 구성 요소 및 라우팅의 하위 속성

Vue 프로젝트에서 레이아웃 구성 요소와 페이지는 라우팅 구성 및 구성 요소 중첩을 통해 결합됩니다. 레이아웃 구성 요소는 웹 사이트의 전체 구조와 레이아웃을 정의하는 데 사용되며 페이지 구성 요소는 특정 콘텐츠를 표시하는 데 사용됩니다.

다음은 레이아웃 구성 요소와 페이지 구성 요소를 함께 배치하는 방법에 대한 간단한 예입니다.

레이아웃 구성 요소 만들기 Layout.vue:

<template>
  <div>
    <header>
      <!-- 布局组件中的头部内容 -->
      <h1>My Website</h1>
    </header>
    <main>
      <!-- 使用 <router-view></router-view> 来显示页面组件 -->
      <router-view></router-view>
    </main>
    <footer>
      <!-- 布局组件中的页脚内容 -->
      <p>© 2023 My Website. All rights reserved.</p>
    </footer>
  </div>
</template>

페이지 구성 요소 만들기Home.vue :

<template>
  <div>
    <h2>Welcome to Home Page</h2>
    <!-- 页面组件的内容 -->
    <p>This is the home page content.</p>
  </div>
</template>

라우팅 구성 생성router.js :

import Vue from 'vue';
import Router from 'vue-router';
import Layout from './components/Layout.vue';
import Home from './components/Home.vue';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      component: Layout, // 使用布局组件作为根组件
      children: [
        {
          path: '',
          component: Home, // 使用页面组件作为子组件
        },
      ],
    },
  ],
});

위의 예에서는 페이지 구성 요소를 표시하기 위한 Layout.vue머리글, 바닥글 및 레이블이 포함된 레이아웃 구성 요소를 만들었습니다 . 그런 다음 홈페이지 콘텐츠를 표시하는 페이지 구성 요소를 <router-view></router-view>만들었습니다 .Home.vue

다음으로 라우팅 구성에서는 Layout.vue루트 구성 요소를 사용하고 children속성을 사용하여 Home.vue하위 구성 요소를 중첩합니다.

웹 사이트 루트 경로에 액세스하면 Vue Router는 레이아웃 구성 요소를 /로드 하고 태그를 통해 페이지 구성 요소를 로드하여 레이아웃 구성 요소 영역 내에 중첩합니다. 이런 방식으로 페이지 구성 요소의 콘텐츠가 레이아웃 구성 요소에 올바르게 연결되어 완전한 페이지를 형성합니다.Layout.vue<router-view></router-view>Home.vueLayout.vuemain

이러한 구성 요소 중첩 및 라우팅 구성 방식을 사용하면 레이아웃에서 다양한 페이지 콘텐츠를 쉽게 전환하여 전체 웹 사이트의 페이지 전환 효과를 얻을 수 있습니다.