vue3.0で導入されたサブルートをマウントする方法

Vue3.0 は Vue.js フレームワークの最新バージョンであり、多くの新機能と優れたパフォーマンスをもたらします。最大の変更の 1 つは、ルーティングの改善です。 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');

ここでは、ホームページ (Home)、概要ページ (About)、およびユーザー ページ (User) の 3 つのルートを持つアプリケーションを作成します。

気づきましたか?ユーザーページのルーティング設定に子ルートを追加しましたが、このように親ルートのchildrenに子ルートを追加することができます。この例では、'' と 'posts' という 2 つのサブルートを追加しました。

ここで、ユーザー ページのコンポーネント テンプレートにサブルーティング スロットを追加する必要があります。以下に、子ルートのスロットを追加する方法を示す簡単な例を示します。

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

お気づきですか?スロット名は空です。これは Vue Router 4.0 によって提供される新機能で、サブルートを自動的に照合し、対応するスロットに挿入します。

最後に、子ルートのコンポーネント テンプレートに独自のスロットを追加する必要があります。以下は簡単な例です。

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

この例のコンポーネント UserProfile.vue は、ユーザー ページのサブルートに追加したコンポーネントです。

これで、サブルーターを Vue アプリケーションに正常にマウントできました。この機能により、コンポーネントに複数のサブルートを追加できるようになり、アプリケーションがより柔軟で強力になります。

以上がvue3.0で導入されたサブルートをマウントする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。