vue3.0에 도입된 하위 경로를 마운트하는 방법-프런트엔드 Q&A-php.cn

vue3.0에 도입된 하위 경로를 마운트하는 방법

WBOY

풀어 주다： 2023-05-23 20:55:06

원래의

695명이 탐색했습니다.

Vue3.0은 Vue.js 프레임워크의 최신 버전으로, 많은 새로운 기능과 더 나은 성능을 제공합니다. 가장 큰 변화 중 하나는 라우팅 개선입니다. Vue3.0에서는 하위 경로를 쉽게 정의할 수 있는데, 이를 마운트하는 방법을 살펴보겠습니다.

먼저 Vue3.0 애플리케이션을 만들고 Vue Router4.0을 설치해야 합니다. 설치 명령은 다음과 같습니다.

npm install vue-router@4.0.0-beta.7

로그인 후 복사

루트 구성 요소에 라우터를 생성하고 이를 Vue 인스턴스에 마운트해야 합니다. 다음은 몇 가지 간단한 예제 코드입니다.

import { createRouter, createWebHistory } from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/about',
    name: 'about',
    component: About
  },
  {
    path: '/user',
    component: () => import(/* webpackChunkName: "user" */ './components/User.vue'),
    children: [
      {
        path: '',
        component: () => import(/* webpackChunkName: "user-profile" */ './components/UserProfile.vue')
      },
      {
        path: 'posts',
        component: () => import(/* webpackChunkName: "user-posts" */ './components/UserPosts.vue')
      }
    ]
  }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

const app = createApp(App);

app.use(router);

app.mount('#app');

로그인 후 복사

여기서 홈 페이지, 정보 페이지, 사용자 페이지의 세 가지 경로가 있는 애플리케이션을 만들었습니다.

눈치채셨나요? 사용자 페이지의 라우팅 구성에 하위 경로를 추가했습니다. 이와 같이 하위 경로를 상위 경로의 하위 항목에 추가할 수 있습니다. 이 예에서는 '' 및 'posts'라는 두 개의 하위 경로를 추가했습니다. children中。在这个例子中，我们添加了两个子路由：'' 和 'posts'。

我们现在需要在用户页面的组件模板中添加子路由插槽。下面是一个简单的示例，展示如何为子路由添加插槽：

<template>
  <div>
    <h2>User</h2>
    <router-view />
  </div>
</template>

로그인 후 복사

注意到了吗？我们的插槽名称是空的。这就是Vue Router4.0提供的新特性，它会自动为我们匹配子路由并将它们插入相应的插槽中。

最后，我们需要在子路由的组件模板中添加自己的插槽。下面是一个简单的示例：

<template>
  <div>
    <h3>User Profile</h3>
  </div>
</template>

로그인 후 복사

这个例子中的组件UserProfile.vue

이제 사용자 페이지의 구성 요소 템플릿에 하위 경로 슬롯을 추가해야 합니다. 다음은 하위 경로에 슬롯을 추가하는 방법을 보여주는 간단한 예입니다.

rrreee

눈치채셨나요? 슬롯 이름이 비어 있습니다. 이는 Vue Router 4.0에서 제공하는 새로운 기능으로, 자동으로 하위 경로를 일치시켜 해당 슬롯에 삽입합니다. 🎜🎜마지막으로 하위 경로의 구성 요소 템플릿에 자체 슬롯을 추가해야 합니다. 다음은 간단한 예입니다. 🎜rrreee🎜이 예의 UserProfile.vue 구성 요소는 사용자 페이지의 하위 경로에 추가한 구성 요소입니다. 🎜🎜이제 Vue 애플리케이션에 서브 라우터를 성공적으로 마운트했습니다. 이 기능을 사용하면 구성 요소에 여러 하위 경로를 추가하여 애플리케이션을 더욱 유연하고 강력하게 만들 수 있습니다. 🎜

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