Vue プロジェクトを開発する場合、さまざまなコンポーネント ページを表示するために切り替えることができるページを実装する必要があることがよくあります。 たとえば、下の図では、サイドバー内のさまざまなコンポーネントをクリックすると、サイドバーと上部は変更されずに、コンポーネント ページのみが切り替わり、さまざまなコンポーネント ページにルーティングされます。 この時点で、ルートビューコンポーネント(ルーティングプレースホルダーとも呼ばれる)を使用する必要があります。 まず、さまざまなコンポーネント ページを切り替えて、必要な場所にrouter-view コンポーネントを追加するページに移動します。 <テンプレート> <!--ヘッダー領域--> <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 です。 インデックス { パス:'/home', コンポーネント:ホーム、 // ロールリストにリダイレクトします。redirect:'/roles', 子供たち:[ { パス:'/rights', コンポーネント:権利 }, { パス:'/roles', コンポーネント:役割 } ] } このようにして、router-view コンポーネントの使用を実現しました。 Vue の router-view コンポーネントの詳細な使用方法については、これで終わりです。Vue router-view コンポーネントの使用に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: W3C チュートリアル (9): W3C XPath アクティビティ
>>: Nginx ロードバランシングとは何か、そしてそれをどのように設定するか
1. Apache Benchの紹介ApacheBench は、Apache サーバーに付属する W...
2 端揃えを実現する div+css レイアウトは、Web ページの組版でよく使用されます。この記事...
シナリオによっては、varchar 型のフィールドを変更する必要があり、変更の結果は 2 つのフィー...
この記事では主に、echart を使用してパーセンテージを表示する Vue の円グラフデータ部分を紹...
序文これまで遭遇したデータベースのデッドロックはすべて、バッチ更新中のロック順序の不一致が原因でした...
初めてDockerを使用してイメージをローカルにパッケージ化してデプロイするまず、私のラップトップシ...
目次A. SpringbootプロジェクトのDockerデプロイメント1. Springbootプロ...
CSSスタイルファイルで指定 #class td /*表のテキストを左右上下に揃えるように設定する*...
この記事では、vue+element-uiでヘッドナビゲーションバーコンポーネントを実装するための具...
目次序文1. グローバル統合オーバーライドを使用する2. .vueファイルを変更する3. コンポーネ...
シングルページアプリケーションを開発する場合、特定のルートを入力し、パラメータに基づいてサーバーから...
進捗バーがスムーズではないフロントエンドを学ぶ学生のほとんどは、オーディオプレーヤーやビデオプレーヤ...
まず、メモリ解放の例を見てみましょう。 <スクリプト言語="JavaScript&q...
目次序文 👀リサーチを始めましょう🐱🏍オリジナル🧶 indexOf を使用した元の方法の最適化 ✍...
目次1. 型2. インスタンス3. コンストラクター4.toString() この記事では、4 つの...