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

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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • vue-router で router-view がレンダリングされない問題の解決方法
  • vue2.0 ルーティングでルータービューが表示されない問題の解決方法
  • vue update router-viewの再利用コンポーネントの内容が更新されない問題を解決する
  • Vueルーティング記事のルータービューコンテンツをレンダリングできません

<<:  W3C チュートリアル (9): W3C XPath アクティビティ

>>:  Nginx ロードバランシングとは何か、そしてそれをどのように設定するか

推薦する

Apache Bench で Web ストレス テストを実装する方法

1. Apache Benchの紹介ApacheBench は、Apache サーバーに付属する W...

CSS の両端揃えを実現する div+css レイアウトの 4 つの方法の概要

2 端揃えを実現する div+css レイアウトは、Web ページの組版でよく使用されます。この記事...

MySQLでレコードを変更する場合、更新操作フィールド = フィールド + 文字列

シナリオによっては、varchar 型のフィールドを変更する必要があり、変更の結果は 2 つのフィー...

Vueはechart円グラフの凡例のパーセンテージを表示するメソッドを実装します

この記事では主に、echart を使用してパーセンテージを表示する Vue の円グラフデータ部分を紹...

MySQL デッドロックのトラブルシューティング プロセスの完全な記録

序文これまで遭遇したデータベースのデッドロックはすべて、バッチ更新中のロック順序の不一致が原因でした...

Docker を使用してイメージをローカルにパッケージ化してデプロイする方法

初めてDockerを使用してイメージをローカルにパッケージ化してデプロイするまず、私のラップトップシ...

Springboot および Vue プロジェクトの Docker デプロイメントの実装手順

目次A. SpringbootプロジェクトのDockerデプロイメント1. Springbootプロ...

HTMLのテーブルの内容は中央に水平と垂直に表示されます

CSSスタイルファイルで指定 #class td /*表のテキストを左右上下に揃えるように設定する*...

vue+element-uiはヘッドナビゲーションバーコンポーネントを実装します

この記事では、vue+element-uiでヘッドナビゲーションバーコンポーネントを実装するための具...

Vue の element-ui コンポーネントのデフォルトの CSS スタイルを変更する 4 つの方法

目次序文1. グローバル統合オーバーライドを使用する2. .vueファイルを変更する3. コンポーネ...

Vueルーティングコンポーネントでパラメータを渡す8つの方法の詳細な説明

シングルページアプリケーションを開発する場合、特定のルートを入力し、パラメータに基づいてサーバーから...

JSはプログレスバーのスムーズバージョンの詳細な計画を実装します

進捗バーがスムーズではないフロントエンドを学ぶ学生のほとんどは、オーディオプレーヤーやビデオプレーヤ...

JavaScript CollectGarbage 関数の例

まず、メモリ解放の例を見てみましょう。 <スクリプト言語="JavaScript&q...

JavaScript 配列重複排除問題の詳細な研究

目次序文 👀リサーチを始めましょう🐱‍🏍オリジナル🧶 indexOf を使用した元の方法の最適化 ✍...

JSにおける4つのデータ型判定方法

目次1. 型2. インスタンス3. コンストラクター4.toString() この記事では、4 つの...