vue-router がルーティング ジャンプとページ レンダリングを実装する方法

Vue-router は、Vue.js の公式ルーティング管理ツールです。Vue.js に基づいたシングルページ アプリケーション (SPA) の構築をサポートします。提供されるルーティング機能により、ファイル内のパスを管理することでページ ジャンプを制御できます。 URLと表示。

この記事では、Vue-router の基本的な実装原理に焦点を当て、Vue-router がルーティング ジャンプとページ レンダリングをどのように実装するかを分析します。

1. Vue-router の基本的な使い方

Vue-router を使用するには、次の手順を実行する必要があります:

1. Vue-router と Vue をインストールします。 js

npm install vue-router

2. Vue インスタンスの作成

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

const router = new VueRouter({
    routes: [
        {
            path: '/home',
            name: 'home',
            component: Home
        },
        {
            path: '/about',
            name: 'about',
            component: About
        }
    ]
});

new Vue({
    router,
    el: '#app',
    template: '<App/>',
    components: { App }
});

上記のコードでは、Vue.use() メソッドを使用して Vue-router を登録し、これは Vue インスタンスのオプションとして提供されており、Vue インスタンスとアプリケーション全体のすべてのコンポーネントで Vue-router を使用できるようになります。

同時に、ルーティング インスタンスで 2 つのルーティング オブジェクトを定義します。各ルーティング オブジェクトは 3 つの属性で構成されます。

• path: パス、このルーティング オブジェクトを指定します。対応する URL path;
• name: コンポーネント名とは異なるルート名。これは便宜上の名前であり、$router.push() および $router.replace() メソッドで呼び出すことができます。
#component: コンポーネント、現在のルートに対応するコンポーネント。

Vue コンポーネントでは、$router オブジェクトと $route オブジェクトを使用してルーティング関連の操作を実行できます。

$router: 別のルーティングにジャンプするために使用されます。
• $route: 現在のルーティング情報を取得するために使用されます。

2. Vue-router の実装原理

ルート ジャンプとページ レンダリングを実装するための Vue-router の基本原理:

お聞きくださいURL の変更

Vue-router は URL の変更を監視し、異なる URL に基づいて異なるページを表示します。

データ バインディングに関しては、Vue.js は内部で Object.defineProperty() メソッドをカプセル化し、データの双方向バインディングを実現します。ただし、Vue.js には URL を変更する方法がありません。したがって、Vue-router には URL の変更を監視する新しい方法が必要です。

Vue-router は、H5 のルーティング API、history.pushState(state, title, url) およびhistory.replaceState(state, null, url) を使用して URL の変更を監視します。 URL が変更されると、Vue-router は内部ルーティング変更メカニズムをトリガーし、現在の URL を使用してレンダリングする必要があるコンポーネントを推測します。

ルーティング ルールのマッチング

Vue-router は、ルートが変更されたときに前の URL と次の URL を比較することによって、ルートが順方向か逆方向かを判断し、呼び出します。さまざまなビューを表示するにはさまざまな方法があります。

Vue-router 内では、ルーティング ルールがルーティング レコードに解析され、各ルーティング レコードには URL パスと対応するコンポーネント情報が含まれます。これらのルーティング レコードは、内部ルーティング テーブルに保存されます。

URL が変更されると、Vue-router は URL パスを照合して現在の URL パスに一致するルーティング レコードをルーティング テーブルから検索します。存在する場合は、URL パスが正当であることを意味します。レンダリングする必要があるコンポーネントを解析します。

レンダリング コンポーネント

法的なルーティング ルールが一致する場合、Vue-router はルーティング ルールで定義されたコンポーネントを使用して、表示する必要があるページをレンダリングします。

コンポーネントをレンダリングするとき、Vue-router の主なアイデアは、レンダリングされるコンポーネントを RouterView コンポーネントにマウントすることです。ルートが変更されると、RouterView コンポーネントは現在のルートに基づいて対応する情報をレンダリングします。レコード情報のコンポーネント。

Vue-router は、$router.push() や $router.replace() など、コンポーネント内のルートをジャンプしたり置換したりするために使用されるいくつかのルート ナビゲーション API も提供します。

3. 概要

Vue-router は、Vue.js の公式ルーティング管理ツールとして、シングルページ アプリケーションを迅速に構築するのに役立ちます。 Vue-router の基本的な実装原理は、主に URL の変更を監視し、ルーティング ルールを照合し、コンポーネントをレンダリングすることによって実装されます。 Vue-router は、URL の変更に基づいて前方に移動するか後方に移動するかを決定し、対応するビューを表示できるルーティング変更メカニズムを内部的にカプセル化します。同時に、Vue-router は、Vue コンポーネントでのジャンプや置換をルーティングするための便利な API を提供します。 Vue-router の原理と使用法をマスターすると、シングルページ アプリケーションをより適切に構築し、フロントエンド開発能力を向上させることができます。

以上がvue-router がルーティング ジャンプとページ レンダリングを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。