Vue 学習 - VueRouter ルーティングの基礎

Vue 学習 - VueRouter ルーティングの基礎

1. Vueルーター

1. 説明

Vue.js + Vue Router を使用してシングルページ アプリケーションを作成するのは自然なことです。Vue.js Vue.js 、コンポーネントを組み合わせてアプリケーションを作成できます。これにVue Routerを追加する場合は、 components routesにマップし、 Vue Router 在それらをレンダリングする場所を指示するだけです。ルートは本質的にハイパーリンクです。

2. 選択したルートのレンダリング:

(1)ルータリンクアクティブクラス

特定の場所にルーティングする場合、対応するルーティング タグにクラス名が追加されます。
たとえば、「About」をクリックすると、「About」に対応するページにジャンプします。

(2)ルータリンクアクティブクラス

ルーティングでは、子ルートのパス設定(例:http://localhost/home)に親ルートのパス設定(例:http://localhost/)が含まれます。その後、子ルートをクリックして、子ルートにrouter-link-activeクラスが追加されると、親ルートにもrouter-link-activeクラスが追加されます。つまり、(http://localhost/home) ルートをクリックすると、両方のルートが選択されます。

3. 基本的な動作原理

vueの html 部分に router-link を導入します (a の原理と同様)。to 属性はジャンプ先の vue コンポーネントであり、 router-view現在のルートが指すコンテンツを表示する役割を担うため、単一ページでもページジャンプの効果を実現できます。

2. 実際の戦闘

1. ルーターを使用してvueプロジェクトを作成する

2. プロジェクト内のsrc/router/index.jsファイルを開きます。

プロジェクトによって 2 つのルートが自動的に生成されたことがわかります。1 つはhomeで、もう 1 つはaboutインターフェイスです。パスはそれぞれ'/''/about'です。

ルートディレクトリのmain.jsを開くと、main.js にルーティングが導入されており、すべてのコンポーネントでルーティングを使用できることがわかります。

3. ブラウザでプロジェクトを開く

HomeAbout 2 つのルート ナビゲーションが表示されます。

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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue-router クイックスタート
  • Vue ルーティング vue-router の使用方法の説明
  • Vue.jsルーティングコンポーネントvue-routerの使い方の詳しい説明
  • Vue 学習ノート vue-router のインストールと使用の高度なバージョン
  • vue-router: ネストされたルートの使用方法
  • 10分で始められるVueRouter 4.xチュートリアル

<<:  MySQL での varchar 型の日付の比較、並べ替え、その他の操作の実装

>>:  暗号化における https の Apache 展開の概要

推薦する

Ubuntu 18.04 コマンドでタッチパッドを無効/有効にする

Ubuntu では、ショートカット キーでタッチパッドをオフにできない状況によく遭遇します。この問題...

MySQL 8.0.15 バージョンのインストールチュートリアル Navicat.list への接続

落とし穴1. ネット上の多くのチュートリアルでは環境変数を設定するファイル名はmy.iniと書いてあ...

JS配列メソッドの詳細な説明

目次1. 元の配列が変更されます1. プッシュ(): 2.ポップ(): 3. シフト(): 4.un...

シンプルなスネークゲームを実現するネイティブjs

この記事では、スネークゲームを実装するためのjsの具体的なコードを参考までに共有します。具体的な内容...

MySQL エラー 1290 (HY000) の解決方法

私は長い間問題に取り組み、文法上の問題を何度も確認しました。しかし、後でネットで調べてみたら、突然理...

MySQL、Oracle、SQL Server のページングクエリ例の分析

最近、Oracle、MySQL、SQL Server 2005 のデータ ページング クエリについて...

Nginx と GeoIP モジュールを使用して IP の地域情報を読み取る方法

LinuxにGeoIPをインストールする yum で nginx-module-geoip をインス...

Docker swarm の簡単なチュートリアル

3つの仮想マシン132、133、134を群がらせる1. クラスターを初期化し、自分自身をクラスターに...

ffmpeg 中国語パラメータの説明と使用例

1. ffmpeg がビデオ ファイルをプッシュする場合、オーディオとビデオのエンコード形式は H2...

ファイル共有サーバーを構築するための samba + OPENldap の詳細な説明

ここでは、samba (ファイル共有サービス) v4.9.1 + OPENldap (バックエンド ...

React のネストされたコンポーネントの構築順序

目次Reactの公式サイトではライフサイクルの説明を見ることができます次に、ネストされたコンポーネン...

mysqlはコンマに基づいてデータ行を複数の行に分割します

目次分離効果コマンドラインの説明関与する機能分離効果-- 別居前1,2,3,4 -- 別居後1 2 ...

vue.js 動的コンポーネントの詳細な説明

:動的コンポーネントv-bind:is="component name" を使用...

MySQL で重複行を見つけて削除する方法

目次1. 重複行を見つける方法2. 重複行を削除する方法3. 複数の列で重複を見つける方法4. クエ...