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