このプロジェクトでは、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 を使ってファイル管理システムを段階的に構築する
【問題分析】 chown コマンドを使用できます。ここで ch は change (変更) を表し...
Docker コンテナは互いに分離されており、相互にアクセスできないことは誰もが知っていますが、依存...
序文WeChat アプレットでは、App.js の globalData を中間ブリッジとして使用し...
IIS7 では、「URL REWRITE2」疑似静的モジュールがインストールされているかどうかを確...
目次序文1. MySQL メインストレージエンジン: 2. さまざまなストレージエンジンがテーブルを...
123WORDPRESS.COM HTML チュートリアル セクションに戻るには、ここをクリックして...
フォーム内のフォーム フィールドが無効に設定されている場合、フォーム フィールドの値は送信されません...
この記事では、Gobangゲームを実装するためのキャンバスの具体的なコードを参考までに共有します。具...
123WORDPRESS.COM では、FileZilla のダウンロード リンクを提供しています:...
非常に大量のデータ(数百 GB)を計算する必要があったことはありますか?または、その内部を検索したり...
この記事では、MySQL が 2 つのテーブルを比較して、異なるデータがあるかどうかを確認する方法を...
目次1. ACIDの特性トランザクション制御構文3. トランザクション同時実行例外1. ダーティリー...
職業的な観点からも、人生の観点からも、良い再建をすることは本当に簡単ではありません。楽観的で熱心で前...
目次Prometheusはエクスポーターを介してMySQLを監視し、Grafanaチャートで表示しま...
1.1 nginxインストールパッケージとインストールスクリプトをクライアントにコピーし、スクリプト...