この記事では、Element-uiを使用してvue.jsでナビゲーションメニューを実装するための具体的なコードを参考までに共有します。具体的な内容は次のとおりです。 これを書いた理由は、この関数を書いたときに、要素は効果があるだけで、機能が実現されておらず、当時は戸惑ったからです。 まずは写真から まず、一般的な実装の考え方を説明します。そうしないと、次のコード スニペットがわかりにくくなります。円で囲まれた左と右の部分はコピーできる要素であり、右の部分はジャンプするサブコンポーネントです。 まず、ナビゲーションメニュー用のvueファイルを作成します。ただし、このファイルはコンポーネントをインポートするだけです。左右の部分を実装するためにContainerレイアウトコンテナを使用します。左側のel-asideタグにナビゲーションメニューのコンポーネントを配置し、右側のel-mainタグに<router-view></router-view>を記述してルートジャンプを実装します。 ナビゲーションメニューファイルにElnav.vueという名前を付けました <テンプレート> <div class="app"> <el-コンテナ> <余談> <navmenu></navmenu> </el-aside> <メイン> <ルータービュー></ルータービュー> </el-main> </el-コンテナ> </div> </テンプレート> <スクリプト> './navmenu' から navmenu をインポートします エクスポートデフォルト{ データ() { 戻る { } }, コンポーネント:{ ナビゲーションメニュー } } </スクリプト> <スタイルスコープ> </スタイル> 主にnavmenuコンポーネントを紹介します(navmenuコンポーネントは要素内のスタイルです) ナビゲーションメニュー default-active="$route.path"の設定とコンポーネントジャンプのインデックス値に注意してください(オプション1/2) <テンプレート> <div> <el-行> <エル-コル> <el-メニュー デフォルトアクティブ="$route.path" ルーター クラス="el-menu-vertical-demo" @open="ハンドルオープン" @close="ハンドルクローズ" > <el-サブメニューインデックス="1"> <テンプレートスロット="タイトル"> <i class="el-icon-location"></i> <span>ナビゲーション 1</span> </テンプレート> <el-メニュー項目グループ> <template slot="title">グループ 1</template> <el-menu-item index="/Elnav/one">オプション 1</el-menu-item> <el-menu-item index="/Elnav/two">オプション 2</el-menu-item> </el-menu-item-group> <el-menu-item-group title="グループ 2"> <el-menu-item index="1-3">オプション 3</el-menu-item> </el-menu-item-group> <el-サブメニューインデックス="1-4"> <template slot="title">オプション 4</template> <el-menu-item index="1-4-1">オプション 1</el-menu-item> </el-サブメニュー> </el-サブメニュー> </el-menu> </el-col> </el-row> </div> </テンプレート> <スクリプト> エクスポートデフォルト{ メソッド: { handleOpen(キー、キーパス) { console.log(キー、キーパス); }, handleClose(キー、キーパス) { console.log(キー、キーパス); } }, マウント() { console.log(this.$route); } }; </スクリプト> <スタイル> </スタイル> 次はルートの設定です { パス: "/Elnav", 名前:「エルナフ」 コンポーネント: () => インポート("../components/Elnav.vue")、 子供たち:[ { パス: "/Elnav/one", 名前: "1", コンポーネント: () => インポート("../components/one.vue") }, { パス: "/Elnav/two", 名前:「2」、 コンポーネント: () => インポート("../components/two.vue") } ] } 右側のone.vueやその他のvueファイルの内容については、自分で書いてください。 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: mysql の find_in_set 関数の基本的な使い方
Iframe Web ページのナビゲーション ウィンドウに関する簡単な説明 Iframe ウェブペー...
序文最近、小さなプログラムでリアルタイムにチャートを更新するという要件に遭遇しました。最初は wx-...
コンテンツオーバーフローとは何ですか?実際、テキストが大量にある場合、コンテンツ領域がそれだけの長さ...
準備する: MySQL 8.0 Windows zip パッケージのダウンロード アドレス: htt...
目次1. インストール環境2. インストール手順ステップ1: インストールパッケージをダウンロードす...
同時アクセスの場合、非反復読み取りやその他の読み取り現象が発生する可能性があります。高い同時実行性に...
この記事の例では、チャットインターフェースの表示を実現するためのVueの具体的なコードを参考までに共...
まず、フォントアイコンとは何でしょうか?表面的にはアイコンですが、実際はテキストです。テキストの設定...
JSはショッピングカート内の商品の合計金額を計算して参考とします。具体的な内容は以下のとおりです。質...
背景最近、Docker 初心者の友人から、毎回プロジェクト構成ファイルにハードコーディングしてサービ...
1. デザインの方向性を明確にする<br />まず、どのユーザーを対象にデザインするのか...
目次1. psutilパッケージをインストールする次に、オペレーティングシステム内のすべてのサービス...
この記事では、Reactリストバーとショッピングカートコンポーネントの具体的なコードを参考までに紹介...
<br />関連記事: Web コンテンツ ページ作成に関する 9 つの実用的な提案 W...
この記事では、MySQL 8.0.11圧縮版のインストールチュートリアルを参考までに紹介します。具体...