このプロジェクトでは、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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: WeChat ミニプログラム 宝くじ番号ジェネレーター
>>: nginx+FastDFS を使ってファイル管理システムを段階的に構築する
仮想DOMの役割まず、仮想 DOM の出現によってどのような問題が解決されるのかを知る必要があります...
述べる:この記事で扱うデータ量は 100 万です。数千万のデータが必要な場合は、量を増やすだけで済み...
目次1. プロトタイプ2. プロトタイプチェーン2.1 コンストラクタ2.2 電話をかける/申し込む...
基本的な3列レイアウト 。容器{ ディスプレイ: フレックス; 幅: 500ピクセル; 高さ: 20...
目次1. はじめに2. 実装3. HTML ドラッグ アンド ドロップ API を使用しないのはなぜ...
目次1. セットとは何か2. セットコンストラクタ2.1) 配列2.2) 文字列2.3) 議論2.4...
この記事は主にインターネット上の他のチュートリアルを参考にしています。実際に操作した上でのまとめです...
この記事では、スクロールウィンドウを実装するためのJavaScriptの具体的なコードを参考までに紹...
[LeetCode] 184. 部門最高給与従業員テーブルにはすべての従業員が保存されます。すべて...
単一のDOMノードでカルーセルを実装するbackgroundImage を使用すると、複数の画像を追...
序文: MySQL 8.0 では高速な列追加がサポートされ、数秒で大きなテーブルにフィールドを追加で...
序文:ルートでは、主要部分は同じでも、基礎となる構造が異なることがあります。たとえば、ホームページに...
目次1. ウェアハウスを使用してhttpd lrzsz解凍ファイルを作成する2. ソースコードファイ...
以下のように表示されます。 XML/HTML コードコンテンツをクリップボードにコピー<!DO...
伝統的な方法は、正方形を固定形式で書くことです。長さ=幅を直接書き、次のように固定値を書きます。 。...