ホームページ >ウェブフロントエンド >フロントエンドQ&A >vue のサブルーティングを設定する方法
Vue は、インタラクティブな Web アプリケーションを構築するための人気のある JavaScript フレームワークです。 Vue のルーティング機能を使用すると、シングル ページ アプリケーション (SPA) を作成できます。異なるルートが異なるコンポーネントに対応し、指定されたコンテンツがコンポーネント内でレンダリングされます。サルートは、他のルート内にネストできる Vue ルーティングの特殊なタイプのルーティングです。この記事では、Vueでサルートを設定する方法を紹介します。
まず、Vue とその関連依存関係がインストールされていることを確認する必要があります。Vue CLI を使用して新しいプロジェクトを作成するのが最善です。次に、Vue コンポーネントを作成し、ルートを定義する必要があります。
親ルートを定義する
親コンポーネント (通常はルート Route/) でルートを定義し、子コンポーネントのコンテナーを提供します。
// src/router/index.js import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) const routes = [ { path: '/', name: 'Home', component: () => import('../views/Home.vue') } ] const router = new VueRouter({ mode: 'history', base: process.env.BASE_URL, routes }) export default router
サブルートの定義
次に、親コンポーネント内のサブコンポーネントを指すルートを作成します。
// src/router/index.js import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) const routes = [ { path: '/', name: 'Home', component: () => import('../views/Home.vue'), children: [ { path: 'about', name: 'About', component: () => import('../views/About.vue') } ] } ] const router = new VueRouter({ mode: 'history', base: process.env.BASE_URL, routes }) export default router
この例では、「/」はルート ルートであり、Home コンポーネントを指します。 Home コンポーネントのサブルートを「/about」として作成し、About コンポーネントを指します。
親コンポーネント テンプレートに子コンポーネント コンテナを追加する
Home コンポーネントのテンプレートに、子コンポーネントをレンダリングするためのプレースホルダ コンテナを追加する必要があります。
<template> <div> <h1>Home</h1> <router-view></router-view> </div> </template>
この「router-view」ディレクティブはサブコンポーネント コンテナであり、サブルートを通じて指定されたコンポーネントを表示します。
子コンポーネント テンプレートにコンテンツを追加する
About コンポーネントのテンプレートに、その内容を示すコンテンツを追加できます。
<template> <div> <h1>About</h1> <p>This is an about page.</p> </div> </template>
これで、Vue サルーターの構成が完了しました。正しく表示されるかテストしてください。
概要
Vue サブルーティングを設定するには 3 つの基本的な手順があります。これらの手順は次のとおりです。
親ルートの定義: ルート ルートで親コンポーネントを宣言し、そのルートをこのコンポーネントに移動します。
サブルートの定義: 親コンポーネント内にサブコンポーネントのルーティング ポインターを作成します。
親コンポーネント テンプレートに子コンポーネント コンテナを追加します。子コンポーネントをプレースホルダー要素に挿入します。
サブコンポーネント テンプレートにコンテンツを追加する: サブコンポーネントの機能を示すコンテンツを提供します。
最後に、Vue でサルートを使用する場合は、パスを正しく保つ必要があることを思い出してください。パスは親コンポーネントから始まり、スラッシュ (/) で始まる必要があります。
以上がvue のサブルーティングを設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。