Vue-routerのサブルート(ネストルート)の作成方法を詳しく解説

アプリケーション インターフェイス開発では、通常、ネストされたコンポーネントの複数の層で構成されます。しかし、ページ数が増加するにつれて、すべてのページを routes 配列に詰め込むと、見た目が非常に乱雑になり、どのページが関連しているかを判断できなくなります。 vue-router を使用すると、ネストされたルーティング機能が提供され、関連するページをまとめて整理できます。 [関連する推奨事項: vue.js ビデオ チュートリアル ]

実験目的

私たちのモール プロジェクトでは、バックグラウンド管理ページ Admin に多くの操作が含まれますページ、例:

• #/admin メイン ページ
• #/admin/create 新しい情報の作成
• /admin/edit 情報の編集

ネストされたルーティングでまとめて整理しましょう。

管理ページの作成

src/views の下に Admin.vue を作成し、管理者のサブページを保存する管理ディレクトリを作成します (vue-router のサブルーターを使用する場合は、それを追加する必要があります)親ページへ) コンポーネントは router-view プレースホルダーを使用します)

• Admin.vue

<template>
  <div class="title">
    <h1>{{ msg }}</h1>
    <!-- 路由插槽 -->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "home",

  data() {
    return {
      msg: "This is the Admin Page",
    };
  },
};
</script>

<style scoped>
</style>

サブページの作成

src/views の下に admin ディレクトリを作成して管理サブページを保存し、admin ディレクトリの下に Create.vue と Edit.vue を作成して実装します /create 新しい製品を作成します /edit 製品情報の編集

• Create.vue

#

<template>
  <div>
    <div class="title">
      <h1>This is Admin/Create</h1>
    </div>
  </div>
</template>

#Edit.vue

• <template>
    <div>
      <div class="title">
        <h1>This is Admin/Edit</h1>
      </div>
    </div>
  </template>

Modify router/index.js code

Add a sub-route. サブルートは、元のルーティング設定に Children フィールドを追加することによって書き込まれます。

children:[
    {path:'/',component:xxx},
    {path:'xx',component:xxx}]

注:

children のパスに / を追加しないでください。これを追加すると、ルート ディレクトリ内のルートになることを意味します。

#index.js

import Vue from 'vue'import VueRouter from 'vue-router'import Admin from '@/views/Admin.vue'// 导入admin子路由import Create from '@/views/admin/Create';import Edit from '@/views/admin/Edit';Vue.use(VueRouter)const routes = [
  {
    path: '/admin',
    name: 'Admin',
    component: Admin,
    children: [
      {
        path: 'create',
        component: Create,
      },
      {
        path: 'edit',
        component: Edit,
      }
    ]
  }]const router = new VueRouter({
  routes})export default router

これで、Vue-router サブルーター (ネストされたルート) が作成されました

配列に詰め込むと、見た目が非常に乱雑になり、どのページが関連しているかを判断できなくなります。

vue-router を使用すると、ネストされたルーティング機能が提供され、関連するページをまとめて整理できます。

以上がVue-routerのサブルート(ネストルート)の作成方法を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。