この記事では、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 にインポートします。 '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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
>>: Centos7 でスーパーバイザ デーモンをインストールして設定する方法
目次1. grub.cfg ファイルの紹介1. grub.cfg ファイルの場所2. grub.cf...
目次アプレットのソースコードはどこにありますか? PC ミニプログラムはどのように暗号化されますか?...
開発中にサーバーを起動する必要がある場合、ローカルテストではポートを直接書き込み、実際の環境ではバイ...
操作効果 html <ヘッド> <メタ文字セット='UTF-8'&...
1. バックアップスクリプトを書く 著者:www.yumi-info.com 日付:20171222...
1. フィールドを追加します。 alter table テーブル名 ADD フィールド名 タイプ;例...
目次1. Dockerファイル2. pom 構成3. イメージプッシュ4. k8s デプロイメント前...
これら 2 つの属性はよく使用されますが、その違いはまとめられていません。それでは、その使い方をまと...
ミラーを探すDocker Hubのウェブサイトからイメージを検索できます。Docker Hubのウェ...
目次執筆の背景プロジェクトの説明事前準備注記執筆の背景以前のプロジェクトではTencent Maps...
:動的コンポーネントv-bind:is="component name" を使用...
1. インストール前の準備データベースのバージョンを確認するコマンド: mysql --versio...
システムの起動時に読み込む必要がある設定ファイル/etc/profile、/root/.bash_p...
序文ビューは、データベース システム内で非常に便利なデータベース オブジェクトです。 MySQL 5...
目次設計シナリオ技術的なポイントサーバー情報準備フルバックアップスクリプト(Mysql-FullyB...