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 を使ってファイル管理システムを段階的に構築する

推薦する

Reactの仮想DOMとdiffアルゴリズムの詳細な説明

仮想DOMの役割まず、仮想 DOM の出現によってどのような問題が解決されるのかを知る必要があります...

MySQLで数千万のテストデータを素早く作成する方法

述べる:この記事で扱うデータ量は 100 万です。数千万のデータが必要な場合は、量を増やすだけで済み...

プロトタイプとプロトタイプチェーン プロトタイプとプロトタイプの詳細

目次1. プロトタイプ2. プロトタイプチェーン2.1 コンストラクタ2.2 電話をかける/申し込む...

CSS flex 複数列レイアウト

基本的な3列レイアウト 。容器{ ディスプレイ: フレックス; 幅: 500ピクセル; 高さ: 20...

ドラッグアンドドロップによる並べ替えの詳細を実現する js

目次1. はじめに2. 実装3. HTML ドラッグ アンド ドロップ API を使用しないのはなぜ...

JavaScript の Set データ構造の詳細な説明

目次1. セットとは何か2. セットコンストラクタ2.1) 配列2.2) 文字列2.3) 議論2.4...

Linux サーバーに Java Web プロジェクトをデプロイするための完全なチュートリアル

この記事は主にインターネット上の他のチュートリアルを参考にしています。実際に操作した上でのまとめです...

JavaScriptでシンプルなスクロールウィンドウを実装する

この記事では、スクロールウィンドウを実装するためのJavaScriptの具体的なコードを参考までに紹...

LeetCode の SQL 実装 (184. 部門内で最も高い給与)

[LeetCode] 184. 部門最高給与従業員テーブルにはすべての従業員が保存されます。すべて...

backgroundImage を使用して画像カルーセルの切り替えを解決する詳細な説明

単一のDOMノードでカルーセルを実装するbackgroundImage を使用すると、複数の画像を追...

MySQL 8.0 で列を素早く追加する方法

序文: MySQL 8.0 では高速な列追加がサポートされ、数秒で大きなテーブルにフィールドを追加で...

vue.js ルーターのネストされたルート

序文:ルートでは、主要部分は同じでも、基礎となる構造が異なることがあります。たとえば、ホームページに...

Linux の操作とメンテナンスの基本 httpd 静的 Web ページ チュートリアル

目次1. ウェアハウスを使用してhttpd lrzsz解凍ファイルを作成する2. ソースコードファイ...

HTMLフォーム要素の包括的な理解

以下のように表示されます。 XML/HTML コードコンテンツをクリップボードにコピー<!DO...

CSSを使用してアダプティブスクエアを実装する方法の例

伝統的な方法は、正方形を固定形式で書くことです。長さ=幅を直接書き、次のように固定値を書きます。 。...