Vue+Router+Element でシンプルなナビゲーションバーを実装する

Vue+Router+Element でシンプルなナビゲーションバーを実装する

このプロジェクトでは、Vue+Router+Element の具体的なコードを共有して、シンプルなナビゲーションバーを実装します。具体的な内容は次のとおりです。

プロジェクト構造:

コードに直接:主にルーティングルータの設定を導入する

①:ルーター(ルートマネージャ)の紹介

//config.js ページ //ナビゲーション バー import Home from '../components/home'
//ホームページは '../components/index' からインデックスをインポートします
//ビデオ プラットフォームは '../components/vid_terrace' から Vid をインポートします
//他のページは '../components/rests' から Rests をインポートします
 
 
エクスポートデフォルト{
  ルート:[
    {
      パス:'/home',
      名前: 'ホーム',
      コンポーネント: ホーム、
    },
    {
      /**
       * home はナビゲーションバーを設定します。設定しないと新しいページにジャンプします * /home/index
       */
 
      パス: '/home',
      名前: 'ホーム',
      コンポーネント: ホーム、
      リダイレクト: 'インデックス',
      子供たち: [
        {
          名前: 'インデックス',
          パス: '/index',
          コンポーネント: インデックス
        },
        {
          名前: 'vid',
          パス: '/vid',
          コンポーネント: Vid
        },
        {
          名前:'休息',
          パス: '/rests',
          コンポーネント: 休符
        }
      ]
    }
  ]、
  // Vue アドレスを削除します#
  モード:'履歴'
}

//index.js ページ

「vue-router」から VueRouter をインポートします。
「vue」からVueをインポートします。
'./config' から Config をインポートします。
 
Vue.use(VueRouter);
 
ルーターを新しい VueRouter(Config) にします。
デフォルトルーターをエクスポートします。

//main.js ページ

'vue' から Vue をインポートします。
'./App' から App をインポートします。
 
 
// Element-ui をインポート
'element-ui' から ElementUI をインポートします。
'element-ui/lib/theme-chalk/index.css' をインポートします。
 
// ./router/index ファイルをインポートしますimport router from "./router/index";
Vue.config.productionTip = false
Vue.js の ElementUI 要素をオーバーライドします。
新しいVue({
 
  el: '#app',
  レンダリング: h => h(App),
  ルーター
})

//app.vue ページ

<テンプレート>
  <div id="アプリ">
    <!-- コンポーネントは、レンダリング パスに一致するビュー コンポーネントをレンダリングする機能コンポーネントです。 -->
      <ルータービュー></ルータービュー>
  </div>
 
</テンプレート>
 
<スクリプト>
 
エクスポートデフォルト{
  名前: 'アプリ'、
  コンポーネント:
   
  }
}
</スクリプト>
 
<スタイル>
#アプリ {
  テキスト配置: 中央;
  色: #2c3e50;
  上マージン: 60px;
}
</スタイル>

//home.vue ページ

<テンプレート>
<!-- ナビゲーション バー -->
  <div>
    <el-メニュー
        :default-active="this.$route.path"
        クラス="el-menu-demo"
        モード="水平"
        @select="ハンドル選択"
        ルーター
        背景色="#545c64"
        テキストカラー="#fff"
        アクティブテキストカラー="#ffd04b">
 
      <el-menu-item v-for="(tit,i) in titleList" :key="i" :index="tit.name">
        <テンプレート>{{ tit.navItem }}</テンプレート>
      </el-menu-item>
 
    </el-menu>
 
    <el-main class="詳細なコンテンツ">
      <ルータービュー />
    </el-main>
  </div>
</テンプレート>
 
<スクリプト>
エクスポートデフォルト{
 
    データ() {
      戻る {
        アクティブインデックス: '1',
        アクティブインデックス2: '1'、
        タイトルリスト:[
          {name:'index', navItem:'ホームページ'},
          {name:'vid',navItem:'ビデオ プラットフォーム'},
          {name:'rests',navItem:'others'},
        ]
 
      }
    },
    メソッド: {
      ハンドル選択(キー、キーパス) {
        console.log(キー、キーパス);
      }
    }
  }
</スクリプト>
 
<スタイルスコープ>
 
</スタイル>

効果画像:

一見すると、Router の設定が少し面倒なので、少し複雑に見えるかもしれません。実際、ナビゲーション バーのコードは数行しかありません。環境がセットアップされている場合は、home.vue ファイルと config.js ファイルを確認するだけで済みます。

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

以下もご興味があるかもしれません:
  • ElementUI の複雑な上部と左側のナビゲーション バーの実装例
  • vue+element-uiはヘッドナビゲーションバーコンポーネントを実装します
  • レスポンシブナビゲーションバーを実装するための Element-ui サンプルコード
  • vue+elementナビゲーションバーを強調表示するためのソリューション
  • vue elementUIはタブを使用してナビゲーションバーにリンクします
  • element-uiでナビゲーションバーを使用してルートにジャンプする方法の詳細な説明
  • VueでElementUIを使用する際のナビゲーションバーのデフォルト拡張機能の実装
  • Vue2.0 elementUI はパンくずナビゲーションバーを作成します
  • 複雑な上部と左側のナビゲーションバーを実現するための ElementUI+名前付きビュー

<<:  WeChat ミニプログラム 宝くじ番号ジェネレーター

>>:  nginx+FastDFS を使ってファイル管理システムを段階的に構築する

推薦する

Linux で特定のユーザーにフォルダーのすべてのコンテンツを許可するにはどうすればよいですか?

【問題分析】 chown コマンドを使用できます。ここで ch は change (変更) を表し...

Dockerコンテナ間で通信する3つの方法

Docker コンテナは互いに分離されており、相互にアクセスできないことは誰もが知っていますが、依存...

WeChatアプレットの世界的な状況の詳細な説明

序文WeChat アプレットでは、App.js の globalData を中間ブリッジとして使用し...

IIS7 IIS8 http は自動的に HTTPS にジャンプします (ポート 80 はポート 443 にジャンプします)

IIS7 では、「URL REWRITE2」疑似静的モジュールがインストールされているかどうかを確...

MySQLストレージエンジンについて学びましょう

目次序文1. MySQL メインストレージエンジン: 2. さまざまなストレージエンジンがテーブルを...

マークアップ言語 - フレーズ要素

123WORDPRESS.COM HTML チュートリアル セクションに戻るには、ここをクリックして...

フォーム内の無効なフォームフィールドの値を送信する方法 サンプルコード

フォーム内のフォーム フィールドが無効に設定されている場合、フォーム フィールドの値は送信されません...

Gobangゲームを実現するためのjsキャンバス

この記事では、Gobangゲームを実装するためのキャンバスの具体的なコードを参考までに共有します。具...

FileZilla Server の FTP サーバー構成と 425 エラーおよび TLS 警告の解決策の詳細な説明

123WORDPRESS.COM では、FileZilla のダウンロード リンクを提供しています:...

マルチコア CPU を使用して Linux コマンドを高速化する方法 (GNU Parallel)

非常に大量のデータ(数百 GB)を計算する必要があったことはありますか?または、その内部を検索したり...

MySQL実践スキル: 2つのテーブルに異なるデータがあるかどうかを比較する方法の分析

この記事では、MySQL が 2 つのテーブルを比較して、異なるデータがあるかどうかを確認する方法を...

MySQL トランザクション制御フローと ACID 特性

目次1. ACIDの特性トランザクション制御構文3. トランザクション同時実行例外1. ダーティリー...

良いリファクタリングを行うには、コードをリファクタリングするだけでなく、人生をリファクタリングすることも重要です。

職業的な観点からも、人生の観点からも、良い再建をすることは本当に簡単ではありません。楽観的で熱心で前...

PrometheusはGrafanaディスプレイを使用してMySQLを監視します

目次Prometheusはエクスポーターを介してMySQLを監視し、Grafanaチャートで表示しま...

Ansible を使用した Nginx のバッチ デプロイのサンプル コード

1.1 nginxインストールパッケージとインストールスクリプトをクライアントにコピーし、スクリプト...