So mounten Sie in vue3.0 eingeführte Unterrouten

Vue3.0 ist die neueste Version des Vue.js-Frameworks, das viele neue Funktionen und eine bessere Leistung bietet. Eine der größten Änderungen betrifft Verbesserungen beim Routing. In Vue3.0 können wir ganz einfach Unterrouten definieren. Schauen wir uns an, wie man sie mountet.

Zuerst müssen wir eine Vue3.0-Anwendung erstellen und Vue Router4.0 installieren. Der Installationsbefehl lautet wie folgt:

npm install vue-router@4.0.0-beta.7

Wir müssen einen Router in der Root-Komponente erstellen und ihn auf der Vue-Instanz mounten. Hier ist ein einfacher Beispielcode:

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

Hier haben wir eine Anwendung mit drei Routen erstellt: einer Startseite, einer Info-Seite und einer Benutzerseite.

Ist es dir aufgefallen? Wir haben in der Routing-Konfiguration der Benutzerseite eine untergeordnete Route hinzugefügt. Die untergeordnete Route kann wie folgt zu den kindern der übergeordneten Route hinzugefügt werden. In diesem Beispiel haben wir zwei untergeordnete Routen hinzugefügt: '' und '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

Wir müssen jetzt den untergeordneten Routenslot in der Komponentenvorlage der Benutzerseite hinzufügen. Hier ist ein einfaches Beispiel, das zeigt, wie man einen Slot für eine untergeordnete Route hinzufügt:

rrreee

Haben Sie es bemerkt? Unser Slotname ist leer. Dies ist die neue Funktion von Vue Router 4.0, die für uns automatisch Unterrouten abgleicht und in die entsprechenden Slots einfügt. 🎜🎜Schließlich müssen wir unseren eigenen Slot in der Komponentenvorlage der untergeordneten Route hinzufügen. Hier ist ein einfaches Beispiel: 🎜rrreee🎜Die Komponente UserProfile.vue in diesem Beispiel ist die Komponente, die wir der Unterroute der Benutzerseite hinzugefügt haben. 🎜🎜Jetzt haben wir den Sub-Router erfolgreich in unsere Vue-Anwendung eingebunden. Mit dieser Funktion können wir einer Komponente mehrere Unterrouten hinzufügen, wodurch unsere Anwendung flexibler und leistungsfähiger wird. 🎜

Das obige ist der detaillierte Inhalt vonSo mounten Sie in vue3.0 eingeführte Unterrouten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!