1. Vueルーター1. 説明Vue.js + Vue Router を使用してシングルページ アプリケーションを作成するのは自然なことです。Vue.js 2. 選択したルートのレンダリング:(1)ルータリンクアクティブクラス 特定の場所にルーティングする場合、対応するルーティング タグにクラス名が追加されます。 (2)ルータリンクアクティブクラス ルーティングでは、子ルートのパス設定(例:http://localhost/home)に親ルートのパス設定(例:http://localhost/)が含まれます。その後、子ルートをクリックして、子ルートに 3. 基本的な動作原理 2. 実際の戦闘1. ルーターを使用してvueプロジェクトを作成する2. プロジェクト内のsrc/router/index.jsファイルを開きます。プロジェクトによって 2 つのルートが自動的に生成されたことがわかります。1 つは ルートディレクトリの 3. ブラウザでプロジェクトを開く
4. 新しいルートを作成するホームページ、メッセージ、ショッピングカート、そして私の 4 つの部分を含む、Taobao に似たルート ナビゲーションを作成します。 4 つのルートに対応する 4 つの新しい vue ファイルを作成します。 ルーティングindex.jsファイルを構成する 'vue' から Vue をインポートします 'vue-router' から VueRouter をインポートします。 '../views/Home.vue' から Home をインポートします。 Vue.use(VueRouter) 定数ルート = [ { パス: '/'、 名前: 'ホーム'、 コンポーネント: ホーム }, { パス: '/message', 名前: 'メッセージ', コンポーネント: () => import(/* webpackChunkName: "about" */ '../views/Message.vue') }, { パス: '/goodcar', 名前: 'GoodCar'、 コンポーネント: () => import(/* webpackChunkName: "about" */ '../views/GoodCar.vue') }, { パス: '/me', 名前: 「私」 コンポーネント: () => import(/* webpackChunkName: "about" */ '../views/Me.vue') } ] const ルーター = 新しい VueRouter({ ルート }) デフォルトルーターをエクスポートする App.vueでナビゲーションバーを設定する <テンプレート> <div id="アプリ"> <div id="nav"> <router-link to="/">ホーム</router-link> <router-link to="/message">メッセージ</router-link> <router-link to="/goodcar">ショッピングカート</router-link> <router-link to="/me">マイ</router-link> </div> <ルータービュー/> </div> </テンプレート> <スタイル> #アプリ { フォントファミリー: Avenir、Helvetica、Arial、sans-serif; -webkit-font-smoothing: アンチエイリアス; -moz-osx-font-smoothing: グレースケール; テキスト配置: 中央; 色: #2c3e50; } #ナビ{ パディング: 30px; マージン: 0 自動; 幅: 30%; ディスプレイ: フレックス; コンテンツの両端揃え: スペースを空ける; } #nav { フォントの太さ: 太字; 色: #2c3e50; テキスト装飾: なし; } #nav a.router-link-exact-active { 色: #42b983; } </スタイル> 結果: これで、ルーティングの基本的な概念とその構成および機能が理解できました。 これで、Vue 学習 - VueRouter ルーティングの基本に関するこの記事は終了です。VueRouter ルーティングの基本に関する関連コンテンツをさらにご覧になりたい場合は、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: MySQL での varchar 型の日付の比較、並べ替え、その他の操作の実装
>>: 暗号化における https の Apache 展開の概要
最初の方法Alibaba Cloud および Baidu Cloud サーバーが利用可能です。 ! ...
序文ES6 で初めて導入された「構造化代入構文」を使用すると、配列やオブジェクトの値を異なる変数に挿...
重要なのは、ローカルサーバーに書き込み権限がないことですキーはここにあります(アクセス拒否)。私は肯...
1. Apacheサーバーのインストールと設定yum インストール httpd -y systemc...
前回の記事では、Oracle でピボット テーブルを実装するいくつかの方法を紹介しました。今日は、同...
目次序文1. リスナーの基本的な使い方2. リスナー形式3. ページに入るとすぐに監視とディープモニ...
その後、VSC で Jupyter Notebook を使用する方法も追加しました...アナコンダを...
目次1. 仮想DOMとは何ですか? 2. 仮想 DOM が必要な理由3. 仮想DOMはどのようにして...
質問1 解決するサービスを開始します: service mysqld start; /sbin/ip...
目次序文原因を発見するカスタムフィルタリングルール要約する序文インターネットの急速な発展に伴い、情報...
導入: Nginx (エンジン エックスと同じ発音) は、BSD のようなプロトコルに基づいてリリー...
1. Java環境jdk1.8を準備するJavaがインストールされているかどうかを確認します。イン...
純粋な HTML + CSS を使ってドラえもんの絵を描くなど、CSS 描画に関する記事をよく見かけ...
目次概要ボタンレベルの権限アイデンティティ認証管理R/U 権限権限の更新テナント管理テナント切り替え...
この記事では、カルーセルアニメーションを実現するためのVueコンポーネントの具体的なコードを例として...