Vueはメニューナビゲーションを実装するためにelement-uiを使用します

Vueはメニューナビゲーションを実装するためにelement-uiを使用します

この記事では、Element-uiを使用してメニューナビゲーションを実装するVueの具体的なコードを参考までに共有します。具体的な内容は次のとおりです。

レンダリング

カタログのスクリーンショット

vue-routerとelement-uiをインストールする

vue-routeは公式のルーティングナビゲーションであり、element-uiはEle.meによってカプセル化されたvueベースのコンポーネントライブラリです。

npm インストール vue-router --save
npm をインストールします。

ESLintチェックをオフにする

新しい設定ファイル src/vue.config.js を追加します。

モジュール.エクスポート = {
    保存時にlint: 偽
}

src/main.js

vue-router と element-ui を main.js にインポートします。
映画と小説の 2 つのページ コンポーネントを作成します。
ルート マップを定義します。
ルートを h5 モードに変更し、醜い # 記号を削除します。

'vue' から Vue をインポートします
'./App.vue' からアプリをインポートします。

'vue-router' から VueRouter をインポートします。
'element-ui' から ElementUI をインポートします。
'element-ui/lib/theme-chalk/index.css' をインポートします。


'./components/movie.vue' からムービーをインポートします。
'./components/novel.vue' から novel をインポートします。

Vue.config.productionTip = false

Vue.use(VueRouter)
Vue.js の ElementUI 要素をオーバーライドします。

定数ルート = [
  { パス: '/movie'、コンポーネント: movie },
  { パス: '/novel'、コンポーネント: novel }
]

// 3. ルーター インスタンスを作成し、`routes` 構成を渡します。// 他の構成パラメータを渡すこともできますが、今はシンプルにしておきましょう。
const ルーター = 新しい VueRouter({
  mode: 'history', //h5 mode ルート // (省略形) ルート: ルートと同等
})

新しいVue({
  レンダリング: h => h(App),
  ルーター
}).$mount('#app')

src/コメント/movie.vue

ムービーページコンポーネント

<テンプレート>
  <div>    
    映画ページ</div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  名前: '映画' 
}
</スクリプト>


<スタイルスコープ>

</スタイル>

src/コメント/小説.vue

小説ページコンポーネント

<テンプレート>
  <div>
    小説ページ</div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  名前: '小説'  
}
</スクリプト>
<スタイルスコープ>

</スタイル>

src/コメント/NavMenu.vue

ナビゲーション コンポーネント。ここでは element-ui メニュー コンポーネントが使用されます。 navMenuData はメニューのデータをシミュレートします。 default-active 属性は現在選択されているメニューを表し、router 属性はインデックスがルーティング パスとして自動的に使用されることを表します。

v-for ループはメニューを生成します。テンプレート タグに v-for を記述しても、必ずしも現在のテンプレートがコピーされるわけではありません。

他の人のブログを見ると、すべて default-active="$route.path" になっていますが、ここには余分な / があります。したがって、マウントされたライフサイクル中に / を削除します。

<テンプレート>
  <div id="ナビゲーションメニュー">
    <el-メニュー
      :default-active="アクティブインデックス"
      クラス="el-menu-demo"
      モード="水平"
      @select="ハンドル選択"
      ルーター
    >
      <!-- 
      <el-menu-item index="1">映画</el-menu-item>
      <el-menu-item index="2">小説</el-menu-item>
      <el-サブメニューインデックス="3">
        <template slot="title">私のワークベンチ</template>
        <el-menu-item index="3-1">オプション 1</el-menu-item>
        <el-menu-item index="3-2">オプション 2</el-menu-item>
        <el-menu-item index="3-3">オプション 3</el-menu-item>
        <el-submenu index="3-4">
          <template slot="title">オプション 4</template>
          <el-menu-item index="3-4-1">オプション 1</el-menu-item>
          <el-menu-item index="3-4-2">オプション 2</el-menu-item>
          <el-menu-item index="3-4-3">オプション 3</el-menu-item>
        </el-サブメニュー>
      </el-サブメニュー> 
      -->

      <template v-for="navMenuData 内の項目">
        <el-menu-item :index="item.index" v-if="!item.child">{{item.name}}</el-menu-item>

        <el-submenu :index="item.index" v-if="item.child">
          <テンプレート スロット="title">{{item.name}}</テンプレート>
          <template v-for="item.child 内の item2">
            <el-menu-item :index="item2.index">{{item2.name}}</el-menu-item>
          </テンプレート>
        </el-サブメニュー>
      </テンプレート>
    </el-menu>
  </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  名前: "NavMenu",
  データ() {
    戻る {
      アクティブインデックス: "映画",     
      ナビゲーションメニューデータ:
        { インデックス: "映画"、名前: "映画" },
        { インデックス: "小説"、名前: "小説" },
        {
          インデックス: "2",
          名前:「私のワークベンチ」
          子: [{ インデックス: "2-1", 名前: "オプション 1" },{ インデックス: "2-2", 名前: "オプション 2" },{ インデックス: "2-3", 名前: "オプション 3" }]
        },
       
      ]
    };
  },
  メソッド: {
    ハンドル選択(キー、キーパス) {
      console.log(キー、キーパス);
    }
  },
  マウントされた(){         
      コンソールログ(this.activeIndex)        
      console.log(this.$route.path)      
      this.activeIndex = this.$route.path.substring(1、this.$route.path.length);     

  }
};
</スクリプト>

<スタイルスコープ>
</スタイル>

src/App.vue

ここでは element-ui コンテナ レイアウトが使用され、自分で作成した NavMenu メニュー コンポーネントが導入されています。

<テンプレート>
  <div id="アプリ">
    <el-コンテナ>
      <el-ヘッダー>
        <ナビゲーションメニュー></ナビゲーションメニュー>
      </el-header>
      <メイン>
         <router-view></router-view> <!--ルート終了-->
      </el-main>
      <el-footer>フッター</el-footer>
    </el-コンテナ>
  </div>
</テンプレート>

<スクリプト>
「./components/NavMenu.vue」からNavMenuをインポートします。

エクスポートデフォルト{
  名前:「アプリ」、
  コンポーネント:
    ナビゲーションメニュー
  }
};
</スクリプト>

<スタイルスコープ>
.el-ヘッダー、
.el-フッター{
  背景色: #b3c0d1;
  色: #333;
  テキスト配置: 中央;
  高さ: 100px;
  パディング: 0px;
}

.el-main {
  背景色: #e9eef3;
  色: #333;
  テキスト配置: 中央;
  行の高さ: 160px;
}

</スタイル>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • 現在の選択内容を保持するには、element-uiのel-menuナビゲーションを使用して選択後にページを更新します。
  • element-ui の el-select のデフォルト選択の問題の詳細な説明
  • 要素UIのメニューのデフォルト選択について default-active

<<:  JavaベースのMySQLバックアップテーブル操作

>>:  Centos7 でスーパーバイザ デーモンをインストールして設定する方法

推薦する

Linux システムで grub.cfg ファイルの破損を修復する手順

目次1. grub.cfg ファイルの紹介1. grub.cfg ファイルの場所2. grub.cf...

node.js で PC 上の WeChat アプレット パッケージを復号化するための処理アイデア

目次アプレットのソースコードはどこにありますか? PC ミニプログラムはどのように暗号化されますか?...

ServerSocketのデフォルトIPバインディングの実装プロセスの詳細な説明

開発中にサーバーを起動する必要がある場合、ローカルテストではポートを直接書き込み、実際の環境ではバイ...

浮遊する雲のアニメーションを実現するCSS3

操作効果 html <ヘッド> <メタ文字セット='UTF-8'&...

Windows での MySQL の使用: 自動スケジュールバックアップの実装

1. バックアップスクリプトを書く 著者:www.yumi-info.com 日付:20171222...

SQL でテーブルにフィールドとコメントを追加する方法

1. フィールドを追加します。 alter table テーブル名 ADD フィールド名 タイプ;例...

Dockerイメージをパッケージ化し、リモートサーバーにプッシュしてk8sにデプロイする方法

目次1. Dockerファイル2. pom 構成3. イメージプッシュ4. k8s デプロイメント前...

altとtitleの違いの詳しい説明

これら 2 つの属性はよく使用されますが、その違いはまとめられていません。それでは、その使い方をまと...

Dockerとイメージの操作方法

ミラーを探すDocker Hubのウェブサイトからイメージを検索できます。Docker Hubのウェ...

Vue は Tencent Map を統合して API を実装します (デモ付き)

目次執筆の背景プロジェクトの説明事前準備注記執筆の背景以前のプロジェクトではTencent Maps...

vue.js 動的コンポーネントの詳細な説明

:動的コンポーネントv-bind:is="component name" を使用...

MySQL 8.0.17 をインストールしてリモート アクセスを構成する方法

1. インストール前の準備データベースのバージョンを確認するコマンド: mysql --versio...

Linux に起動方法を追加する (サービス/スクリプト)

システムの起動時に読み込む必要がある設定ファイル/etc/profile、/root/.bash_p...

MySQL ビューの紹介と基本操作のチュートリアル

序文ビューは、データベース システム内で非常に便利なデータベース オブジェクトです。 MySQL 5...

mysql バックアップ戦略の実装 (フルバックアップ + 増分バックアップ)

目次設計シナリオ技術的なポイントサーバー情報準備フルバックアップスクリプト(Mysql-FullyB...