vue-router がルーティングジャンプとページレンダリングを実装する方法-フロントエンドQ&A-php.cn

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

PHPz

リリース： 2023-04-26 17:38:31

オリジナル

1163 人が閲覧しました

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

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

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

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

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

npm install vue-router

ログイン後にコピー

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() メソッドで呼び出すことができます。

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

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

2. Vue-router の実装原理

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

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 サイトの他の関連記事を参照してください。