Vue でのルータービューコンポーネントの使用に関する詳細な説明

Vue プロジェクトを開発する場合、さまざまなコンポーネントページを表示するために切り替えることができるページを実装する必要があることがよくあります。

たとえば、下の図では、サイドバー内のさまざまなコンポーネントをクリックすると、サイドバーと上部は変更されずに、コンポーネントページのみが切り替わり、さまざまなコンポーネントページにルーティングされます。

画像の説明を追加してください

この時点で、ルートビューコンポーネント（ルーティングプレースホルダーとも呼ばれる）を使用する必要があります。

まず、さまざまなコンポーネントページを切り替えて、必要な場所にrouter-view コンポーネントを追加するページに移動します。
ホーム.vue

<テンプレート>
<!--ヘッダー領域-->
    <el-ヘッダー>
      <div>
        <img class="shop" src="../assets/img/shop.png" alt="">
        <span>電子商取引バックエンド管理システム</span>
      </div>
      <el-button type="info" @click="logout">ログアウト</el-button>
    </el-header>
    <el-コンテナ>
<!--サイドバー-->
	<!--これは理解しやすいように簡略化されています。つまり、サイドバーのさまざまなオプションをクリックしてルートにジャンプします-->
    <router-link :to="/roles"></router-link><!--ロールリスト-->
    <router-link :to="/rights"></router-link><!--権限リスト-->
<!--ルートプレースホルダー-->
    <ルータービュー></ルータービュー>
</テンプレート>

ロールリストに対応するルートは /roles で、権限リストに対応するルートは /rights です。
router-viewコンポーネントを追加したら、ルートを設定します。以下はルート設定です。

インデックス

{
      パス:'/home',
      コンポーネント:ホーム、
      // ロールリストにリダイレクトします。redirect:'/roles',
      子供たち：[
        {
          パス:'/rights',
          コンポーネント:権利
        },
        {
          パス:'/roles',
          コンポーネント:役割
        } 
      ]
    }

このようにして、router-view コンポーネントの使用を実現しました。

Vue の router-view コンポーネントの詳細な使用方法については、これで終わりです。Vue router-view コンポーネントの使用に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

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