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

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

実験目的

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

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

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

管理ページの作成

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

Admin.vue

ログイン後にコピー

サブページの作成

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

Create.vue

ログイン後にコピー

ログイン後にコピー

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

ログイン後にコピー