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をインストールする方法

推薦する

mysql8.0.11 winx64 手動インストールと設定チュートリアル

まず、私の日常生活についてお話しします。MySQLの急速なアップデートにより、MySQLはバージョン...

HTML チュートリアル: 画像のサイズ、配置、間隔、境界線の属性を変更する方法

画像タグ: <img> ページに画像を挿入するには、「src」属性を持つ「img」タグを...

Vue.jsはカレンダー機能を実装します

この記事では、カレンダー機能を実装するためのVue.jsの具体的なコードを例として紹介します。具体的...

Centos7でのSambaサーバー構成(実戦)

サンバの概要Samba は、Linux および UNIX システム上で SMB プロトコルを実装する...

JavaScript Proxyオブジェクトの詳細な説明

目次1. プロキシとは何ですか? 2. 使い方は? 1. プロキシを使用する簡単な例2. 対象オブジ...

Mysqlトランザクション操作の失敗を解決する方法

Mysqlトランザクション操作の失敗を解決する方法トランザクションの原子性: トランザクションは、デ...

IE6 スペースバグ修正方法

コードを見てみましょう:コードをコピーコードは次のとおりです。 < !DOCTYPE html...

ランダムロールコールテーブルを実装するためのネイティブJavaScript

この記事では、JavaScriptのランダムロールコールテーブルの具体的なコードを参考までに紹介しま...

react setStateの詳細な説明

目次setState は同期ですか、それとも非同期ですか?カスタム合成イベントと React フック...

Dockerでボリュームを管理する2つの方法

前回の記事では、Dockerの基礎知識であるローカルディレクトリのマウント方法を紹介しました。今日は...

自動的にフォーカスを取得する要素入力ボックスの実装

最近のプロジェクトでフォームを作成するときに、コメント ボックスまで自動的にスクロールし、コメント ...

Dockerのyumソースの設定とCentOS7へのインストールの詳細な説明

ここではCentOS7が使用されており、カーネルバージョンは [root@localhost ~]#...

JavaScript の async と await のシンプルで詳細な学習

目次1. はじめに2. 詳しい説明2.1、非同期2.1.1. 関数はPromise以外のオブジェクト...

Vueでドラッグ可能なコンポーネントを実装する方法

この記事では、Vueでドラッグ可能なコンポーネントとドラッグ可能なコンポーネントを実装する方法を参考...

Amap を使用した React 実装例 (react-amap)

React の PC 版は Amap を使用するようにリファクタリングされました。情報を検索したと...