Comment monter des sous-routes introduites dans vue3.0

Vue3.0 est la dernière version du framework Vue.js, qui apporte de nombreuses nouvelles fonctionnalités et de meilleures performances. L’un des changements les plus importants concerne l’amélioration du routage. Dans Vue3.0, nous pouvons facilement définir des sous-routes, voyons comment les monter.

Tout d'abord, nous devons créer une application Vue3.0 et installer Vue Router4.0. La commande d'installation est la suivante :

npm install vue-router@4.0.0-beta.7

Nous devons créer un routeur dans le composant racine et le monter sur l'instance Vue. Voici un exemple de code simple :

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');

Ici, nous avons créé une application avec trois itinéraires : une page d'accueil, une page À propos et une page Utilisateur.

Avez-vous remarqué ? Nous avons ajouté une route enfant dans la configuration de routage de la page utilisateur. La route enfant peut être ajoutée aux enfants de la route parent comme ceci. Dans cet exemple, nous avons ajouté deux routes enfants : '' et '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

Nous devons maintenant ajouter le slot de route enfant dans le modèle de composant de la page utilisateur. Voici un exemple simple montrant comment ajouter un créneau pour un parcours enfant :

rrreee

Vous l'avez remarqué ? Notre nom de slot est vide. Il s'agit de la nouvelle fonctionnalité fournie par Vue Router 4.0, qui fera automatiquement correspondre les sous-routes pour nous et les insérera dans les emplacements correspondants. 🎜🎜Enfin, nous devons ajouter notre propre emplacement dans le modèle de composant de l'itinéraire enfant. Voici un exemple simple : 🎜rrreee🎜Le composant UserProfile.vue dans cet exemple est le composant que nous avons ajouté à la sous-route de la page utilisateur. 🎜🎜Maintenant, nous avons monté avec succès le sous-routeur dans notre application Vue. Cette fonctionnalité nous permet d'ajouter plusieurs sous-routes dans un composant, rendant notre application plus flexible et puissante. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!