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 展開の概要

推薦する

Linux サーバーに Python3 をインストールする 2 つの方法

最初の方法Alibaba Cloud および Baidu Cloud サーバーが利用可能です。 ! ...

Javascript における分割代入構文の詳細な説明

序文ES6 で初めて導入された「構造化代入構文」を使用すると、配列やオブジェクトの値を異なる変数に挿...

dockerログマウントの問題を解決する

重要なのは、ローカルサーバーに書き込み権限がないことですキーはここにあります(アクセス拒否)。私は肯...

Apache の一般的な仮想ホスト設定方法の分析

1. Apacheサーバーのインストールと設定yum インストール httpd -y systemc...

MySQL/MariaDB でピボット テーブルを実装する方法のサンプル コード

前回の記事では、Oracle でピボット テーブルを実装するいくつかの方法を紹介しました。今日は、同...

Vue のリスナーの基本的な使用例

目次序文1. リスナーの基本的な使い方2. リスナー形式3. ページに入るとすぐに監視とディープモニ...

Jupyter Notebook で JavaScript を実行する方法

その後、VSC で Jupyter Notebook を使用する方法も追加しました...アナコンダを...

Vue 仮想 DOM の問題について

目次1. 仮想DOMとは何ですか? 2. 仮想 DOM が必要な理由3. 仮想DOMはどのようにして...

Navicat を仮想マシン MySQL に接続する際によくあるエラーと解決策

質問1 解決するサービスを開始します: service mysqld start; /sbin/ip...

VUEプロジェクトでXSS攻撃に遭遇した実体験

目次序文原因を発見するカスタムフィルタリングルール要約する序文インターネットの急速な発展に伴い、情報...

Windows 上で Nginx+Tomcat クラスタを実装するプロセスの分析

導入: Nginx (エンジン エックスと同じ発音) は、BSD のようなプロトコルに基づいてリリー...

JenkinsのLinuxインストール手順と各種問題解決(ページアクセス初期化パスワード)

1. Java環境jdk1.8を準備するJavaがインストールされているかどうかを確認します。イン...

CSS でのシングル div 描画テクニックの実装

純粋な HTML + CSS を使ってドラえもんの絵を描くなど、CSS 描画に関する記事をよく見かけ...

VueのID認証管理とテナント管理の詳細な説明

目次概要ボタンレベルの権限アイデンティティ認証管理R/U 権限権限の更新テナント管理テナント切り替え...

カルーセルアニメーションを実現するVueコンポーネント

この記事では、カルーセルアニメーションを実現するためのVueコンポーネントの具体的なコードを例として...