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

rrreee

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!