Vue でネストされた子ルート. JS Web アプリケーション

Web アプリケーションの優れたユーザー インターフェイスを作成するときは、可能な限り多くの機能を再利用する必要があります.アプリケーション内で子ルートを親ルートに割り当てることで、Vue.JS でマルチレベルの UI を作成できます.これにより、新しいナビゲーションの可能性への扉が開かれます.
Vue.Js Web アプリケーションでネストされたルートに子ルートとビューを割り当てる方法を探ります.

Vue CLI を使用して新しい Vue.js プロジェクトを作成する

簡単にするために、新しい Vue.Js プロジェクトを作成することから始めます. Vue CLI がインストールされていると仮定して、次のコマンドを実行します.

vue create nested-project

CLI によって提示された質問に回答します.スタンドアロン プロジェクトを使用するか、ランタイムのみのプロジェクトを使用するかに違いはありません.重要なのは、vue-router ライブラリがインストールされていることです.
最後に、プロジェクトの足場を確立した後、次のコマンドを実行します.

cd nested-project
npm install

いくつかのクールな UI 機能の準備として、親ルートと子ルートの作業を開始できます.

親ルートと子ルートを表すコンポーネントの追加

新しい CLI 生成プロジェクトに src/components/HelloWorld.vue ファイルが必要です.そのままでも構いませんが、この例の流れを保つために src/components/page1.vue に名前を変更すると、把握しやすくなります.親ビューは、このコンポーネントによって表されます.
プロジェクトの src/components/page1.vue ファイルに以下を含めます.

<template>
    <div class="page1">
        <h1>{{ msg }}</h1>
        <router-view></router-view>
    </div>
</template>

<script>
    export default {
        name: 'Page1',
        data () {
            return {
                msg: 'Welcome to Your Vue.js App'
            }
        }
    }
</script>

<style scoped>
    h1, h2 {
        font-weight: normal;
    }

    a {
        color: #42b983;
    }
</style>

プロジェクトをスキャフォールディングすると、上記のコードに似たものが得られます.ただし、ブロックにタグを配置したことがわかります.これらのタグは、作成するすべてのルートのパススルーとして機能します.これらのタグは子ビューに渡されます.
プロジェクトの src/App.vue ファイルを開くと、タグが表示されます. src/App.vue ファイル内のこれらのタグは、親ルートによって使用されます.
タグはブロックのルート レベルでは使用できないことに注意してください.別の言い方をすれば、これは機能しません.

<template>
    <router-view></router-view>
</template>

代わりに、タグは

<div>

要素または類似のもの.
親ビューが邪魔にならないので、入れ子にする予定の子ビューにピボットしましょう.プロジェクト内に src/components/child1.vue ファイルを作成し、次のコードを含めます.

<template>
    <div class="child1">
        <p>{{ footnote }}</p>
    </div>
</template>

<script>
    export default {
        name: 'Child1',
        data () {
            return {
                footnote: 'Created by The Developer'
            }
        }
    }
</script>

<style scoped></style>

上記のコードでは、テキスト行を表示するだけです.使命は、前の親ビューが表示しているものと一緒に表示することです.
2 つのコンポーネントが邪魔にならないので、vue-router ライブラリと一緒にルートを配線することに集中しましょう.

Vue.Js ルーターの設計

この特定の例のすべてのルートは、プロジェクトの src/router/index.js ファイルにあります.これを開くと、以前に名前を変更した HelloWorld.vue ファイルがまだ参照されていることがわかります.ファイル全体を変更するだけです.
プロジェクトの src/router/index.js ファイル内に、以下を含めます.

import Vue from 'vue'
import Router from 'vue-router'
import Page1 from '@/components/page1'
import Child1 from '@/components/child1'

Vue.use(Router)

export default new Router({
    routes: [
        {
            path: "/",
            redirect: {
                name: "Child1"
            }
        },
        {
            path: '/page1',
            name: 'Page1',
            component: Page1,
            children: [
                {
                    path: "child1",
                    name: "Child1",
                    component: Child1
                }
            ]
        }
    ]
})

プロジェクトを実行すると、アプリケーションのルートに移動すると、http://localhost:8080/ #/page1/child1 にリダイレクトされ、親ビューとネストされた子ビューの両方のデータが画面にレンダリングされることがわかります.
すごいでしょ?
子ルートをレンダリングする方法はこれだけではありません.たとえば、デフォルトの子ルートを構成して、子パスに直接移動する必要がないようにすることができます.
src/router/index.js ファイルへの次の変更に注意してください.

import Vue from 'vue'
import Router from 'vue-router'
import Page1 from '@/components/page1'
import Page2 from '@/components/page2'
import Child1 from '@/components/child1'

Vue.use(Router)

export default new Router({
    routes: [
        {
            path: "/",
            redirect: {
                name: "Child1"
            }
        },
        {
            path: '/page1',
            component: Page1,
            children: [
                {
                    path: "",
                    name: "Child1",
                    component: Child1
                }
            ]
        }
    ]
})

上記のコードでは、親ルートの名前を削除し、子パス属性を空白にしています.これで、http://localhost:8080/#/page1 パスに移動すると、子がレンダリングされます.そのパスに直接移動する必要がなくなります.

結論

ネストされた子ルートを Vue.js Web アプリケーションに含める方法を想像しただけです.入れ子になった子を持つことは、とりわけ、テンプレート化に関しては便利です.たとえば、複数の設定カテゴリがあるアプリケーションの設定セクションがあるとします.設定セクションは多くの親ルートの 1 つになる可能性があり、各カテゴリはその親の子になる可能性があります.😅