vue router-view のネストされた表示実装

1. ルーティング構成

定数ルート = [
  {
    パス： '/'、
    名前: 'ナビゲーション 1'、
    コンポーネント: ホーム、
    子供たち：[
      {
        パス: '/customer',
        名前: '顧客'、
        // ルートレベルのコード分割
        // これにより、このルート用の別のチャンク (about.[hash].js) が生成されます
        // ルートが訪問されたときに遅延ロードされます。
        コンポーネント: () => import(/* webpackChunkName: "about" */ '../views/Customer.vue')
      },
      {
        パス: '/pageOne',
        名前: 'ページ 1'、
        コンポーネント: PageOne、

      },
      {
        パス: '/pageTwo',
        名前: 'ページ 2'、
        コンポーネント: PageTwo、
    },
    ]
  },
  {
    パス: '/navigation',
    名前: 'ナビゲーション2'、
    コンポーネント: ホーム、
    子供たち：[
      {
        パス: '/pageThree',
        名前: 'ページ3'、
        コンポーネント: PageThree、

      },
      {
        パス: '/pageFour',
        名前: 'ページ4'、
        コンポーネント: PageFour
      },
    ]
  },

2. Vueページのネスト

App.vueは最初に最初のルータービューを設定します

// ハイライトされたブロック
 <ルータービュー></ルータービュー>

Home.vueは2番目のルータービューを設定します

// ハイライトされたブロック
<テンプレート>
  <div>
  <el-container style="height: 500px; border: 1px solid #eee">
    <el-aside width="200px" style="background-color: rgb(238, 241, 246)">

      <el-メニュー>
        <el-submenu v-for="(item,index) in $router.options.routes" :index="index+''">
        <template slot="title"><i class="el-icon-sell"></i>{{item.name}}</template>
          <el-menu-item v-for="(item2,index2) in item.children" :index="index+'-'+index2">{{item2.name}}</el-menu-item>
        </el-サブメニュー>
      </el-menu>
    </el-aside>

    <el-コンテナ>
      <el-header style="text-align: right; font-size: 12px">
        <el-ドロップダウン>
          <i class="el-icon-setting" style="margin-right: 15px"></i>
          <el-dropdown-menu slot="ドロップダウン">
            <el-dropdown-item>表示</el-dropdown-item>
            <el-dropdown-item>新規</el-dropdown-item>
            <el-dropdown-item>削除</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <span>王暁湖</span>
      </el-header>

      <メイン>
        <ルータービュー></ルータービュー>

      </el-main>
    </el-コンテナ>

  </el-コンテナ>

</div>
</テンプレート>

<スタイル>
.el-ヘッダー{
  背景色: #B3C0D1;
  色: #333;
  行の高さ: 60px;
}

.el-aside {
  色: #333;
}
</スタイル>

<スクリプト>
エクスポートデフォルト{

};
</スクリプト>

3. ネストされた関係

まず、http://localhost:8181/ にアクセスすると、ネストの最初のレベルに入り、最初のルータービューである Home.vue に入ります。次に、pageone にアクセスすると、Home.vue にもアクセスされます。

router-view のネストされた表示はネストされたルーティングパスに関連しているため、ルーティングでは、ナビゲーション 1 のパスの下に、それぞれページ 1 とページ 2 のルーティングパスがあることがわかります。したがって、ページ 1 にアクセスすると、親パスの Home.vue ページに最初にアクセスされます。 router-viewを配置せずにHome.vueページを追加すると、下位レベルのページは表示されません。

これで、vue router-view のネストされた表示の実装に関するこの記事は終了です。vue router-view のネストされた表示に関する関連コンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: