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 でスーパーバイザ デーモンをインストールして設定する方法

推薦する

Nexus をベースに Alibaba Cloud プロキシ ウェアハウスを構成するプロセスの分析

Nexus のデフォルトのリモートリポジトリは https://repo1.maven.org/ma...

js での遅延読み込みとプリロードの具体的な使用法

遅延読み込み(レイジー読み込み)とプリロードは、Web 最適化によく使用される手段です。 。 1. ...

nginx 設定ファイルで環境変数を使用する方法

序文Nginx はパフォーマンスを重視して設計された HTTP サーバーです。Apache や li...

Redis イメージの Docker インストールと設定手順

目次序文環境インストールMySQLコンテナを作成して起動する落とし穴を避けるための注意MySQLコン...

docker コマンド例外「権限が拒否されました」の解決方法

Linuxシステムでは、dockerを新しくインストールし、次のようなコマンドを入力します。dock...

202 無料の高品質 XHTML テンプレート (1)

ここで 123WORDPRESS.COM はこれらのテンプレートの最初の部分を紹介します。各テンプレ...

Windows 10 インストール vmware14 チュートリアル図

ソフトウェアのダウンロードソフトウェアのダウンロード リンク: https://pan.baidu....

Windows システムに VirtualBox と Ubuntu 16.04 をインストールするための詳細なチュートリアル

1. ソフトウェアの紹介バーチャルボックスVirtualBox は、無料のオープンソース仮想マシン ...

CentOS7にJDK8をrpmモードでインストールする

CentOS 7が正常にインストールされると、OpenJDKのJREがデフォルトでインストールされて...

Tomcat を IDEA にダウンロード、インストール、デプロイするチュートリアル (IDEA の 2 つのホット デプロイ設定方法付き)

目次Tomcat ダウンロードチュートリアルTomcat インストールチュートリアルTomcat の...

tinyMCEの使い方と体験の詳細な説明

tinyMCE の使用方法の詳細な説明初期化TinyMCE を初期化するときは、ページの HEAD ...

Vue のデータ応答性に関する詳細な理解

目次1. ES 構文のゲッターとセッター2. ES構文でのdefineProperty 3. Vue...

スネークゲームを作るための Pygame コード

目次使用されるPygame関数スクリーンの作成ヘビの作成ヘビを動かすゲームオーバーの処理食事を増やす...

Centos7.3 に mysql5.7.18 をインストールするための詳細なチュートリアル

1 Linuxディストリビューションのバージョンを確認する[root@typecodes ~]# c...

Linux で top コマンドを使用する際のヒント

まず、top のいくつかのフィールドの意味を紹介します。 VIRT:仮想メモリ使用量1. プロセスが...