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 サイトの他の関連記事を参照してください。