Vue.jsはElement-uiを使用してナビゲーションメニューを実装します

Vue.jsはElement-uiを使用してナビゲーションメニューを実装します

この記事では、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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • vue+elementui+vuex+sessionStorage を使用して履歴タグ メニューを実装するためのサンプル コード
  • Vueはメニューナビゲーションを実装するためにelement-uiを使用します
  • Vue+Element UIはドロップダウンメニューのカプセル化を実現します
  • Vue+element-ui はカスタム右クリックメニューメソッドの例を追加します
  • Vue + Element UIは権限管理システムのメニュー機能実装コードを実装します

<<:  mysql の find_in_set 関数の基本的な使い方

>>:  DockerにMySQLをインストールする方法

推薦する

Iframe Web ページのナビゲーション ウィンドウに関する簡単な説明

Iframe Web ページのナビゲーション ウィンドウに関する簡単な説明 Iframe ウェブペー...

WeChatアプレット+EChartsで動的更新プロセス記録を実現

序文最近、小さなプログラムでリアルタイムにチャートを更新するという要件に遭遇しました。最初は wx-...

表内のコンテンツオーバーフローのレイアウト方法について

コンテンツオーバーフローとは何ですか?実際、テキストが大量にある場合、コンテンツ領域がそれだけの長さ...

Windows 10 + mysql 8.0.11 zipインストールチュートリアルの詳細

準備する: MySQL 8.0 Windows zip パッケージのダウンロード アドレス: htt...

Linux環境にJDK1.8をインストールする

目次1. インストール環境2. インストール手順ステップ1: インストールパッケージをダウンロードす...

MySQLデータベースのロック機構の分析

同時アクセスの場合、非反復読み取りやその他の読み取り現象が発生する可能性があります。高い同時実行性に...

Vueはチャットインターフェースを実装する

この記事の例では、チャットインターフェースの表示を実現するためのVueの具体的なコードを参考までに共...

CSSでフォントアイコンを使用する方法をお教えします

まず、フォントアイコンとは何でしょうか?表面的にはアイコンですが、実際はテキストです。テキストの設定...

JSはショッピングカート内の商品の合計金額の計算を実現します

JSはショッピングカート内の商品の合計金額を計算して参考とします。具体的な内容は以下のとおりです。質...

Springboot プロジェクトに動的にパラメータを渡すための Docker の実装方法

背景最近、Docker 初心者の友人から、毎回プロジェクト構成ファイルにハードコーディングしてサービ...

ウェブページエクスペリエンス: 計画と設計

1. デザインの方向性を明確にする<br />まず、どのユーザーを対象にデザインするのか...

Linuxサービスの監視と運用および保守

目次1. psutilパッケージをインストールする次に、オペレーティングシステム内のすべてのサービス...

React リストバーとショッピングカートコンポーネントの使用の詳細な説明

この記事では、Reactリストバーとショッピングカートコンポーネントの具体的なコードを参考までに紹介...

ウェブページレイアウトに関する9つのヒント

<br />関連記事: Web コンテンツ ページ作成に関する 9 つの実用的な提案 W...

Windows 10 での MySQL 8.0.11 圧縮バージョンのインストール チュートリアル

この記事では、MySQL 8.0.11圧縮版のインストールチュートリアルを参考までに紹介します。具体...