Comment vue-router implémente les sauts de routage et le rendu des pages

Vue-router est l'outil officiel de gestion de routage de Vue.js. Il prend en charge la création d'applications monopage (SPA) basées sur Vue.js. La fonction de routage qu'il fournit nous permet de contrôler les sauts de page en gérant le chemin dans. l'URL. Tournez et affichez.

Cet article se concentrera sur les principes d'implémentation sous-jacents de Vue-router et analysera comment Vue-router implémente les sauts de routage et le rendu des pages.

1. Utilisation de base de Vue-router

Pour utiliser Vue-router, nous devons effectuer les étapes suivantes :

1. Installez Vue- router et Vue.js

npm install vue-router

2. Créer une instance 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 }
});

Dans le code ci-dessus, nous utilisons Vue La méthode .use() enregistre Vue-router, crée une instance de routage et l'utilise comme option de l'instance Vue, afin que les instances Vue et chaque composant de l'application entière puissent utiliser Vue-router.

En même temps, dans l'instance de routage, nous définissons deux objets de routage, chaque objet de routage est constitué de trois attributs :

• path : path, L'URL le chemin correspondant à cet objet de routage est spécifié ;
• name : nom de la route, qui est différent du nom du composant. C'est un nom pour plus de commodité. Vous pouvez utiliser $router.push() et $router. Méthode replace() à appeler
• component : composant, le composant correspondant à la route actuelle.

Dans le composant Vue, nous pouvons utiliser les objets $router et $route pour effectuer des opérations liées au routage :

• $router : Utiliser Utilisé pour passer à un autre itinéraire ;
• $route : utilisé pour obtenir les informations d'itinéraire actuelles.

2. Le principe de mise en œuvre de Vue-router

Le principe de base de Vue-router pour implémenter le saut de routage et le rendu de page :

#🎜 🎜#

Écouter les modifications d'URL

Vue-router affiche différentes pages en fonction de différentes URL en écoutant les modifications d'URL.

En termes de liaison de données, Vue.js encapsule en interne la méthode Object.defineProperty(), qui réalise une liaison bidirectionnelle de données. Cependant, Vue.js n'a aucun moyen de gérer les modifications d'URL. Par conséquent, Vue-router a besoin d'une nouvelle façon de surveiller les modifications d'URL.

Vue-router utilise l'API de routage de H5 — history.pushState(state, title, url) et history.replaceState(state, null, url) pour surveiller les modifications d'URL. Lorsque l'URL change, Vue-router déclenchera le mécanisme de changement de routage interne et utilisera l'URL actuelle pour déduire le composant qui doit être rendu.

Règles de routage correspondantes

Vue-router déterminera l'itinéraire en comparant l'URL précédente avec l'URL suivante lorsque l'itinéraire change. avancer ou reculer, puis appeler différentes méthodes pour afficher différentes vues.

Dans Vue-router, les règles de routage seront analysées dans les enregistrements de routage. Chaque enregistrement de routage contient un chemin URL et les informations de composant correspondantes. Ces enregistrements de routage sont stockés dans la table de routage interne.

Lorsque l'URL change, Vue-router recherchera un enregistrement de routage correspondant au chemin d'URL actuel de la table de routage en faisant correspondre le chemin d'URL. S'il existe, cela signifie que le chemin d'URL est légal, puis analyse les informations qui doivent être restituées.

Composant de rendu

Si une règle de routage légale correspond, Vue-router utilisera le composant défini dans la règle de routage pour rendre la page qu'il faut afficher.

Lors du rendu des composants, l'idée principale de Vue-router est de monter le composant à rendre sur un composant RouterView. Lorsque l'itinéraire change, le composant RouterView sera rendu en fonction du routage actuel. enregistrer les informations sur les composants correspondants.

Vue-router fournit également des API de navigation d'itinéraire, telles que $router.push() et $router.replace(), qui sont utilisées pour sauter et remplacer des itinéraires dans des composants.

3. Résumé

Vue-router, en tant qu'outil officiel de gestion de routage de Vue.js, peut nous aider à créer rapidement des applications d'une seule page. Le principe de mise en œuvre sous-jacent de Vue-router est principalement mis en œuvre en surveillant les modifications d'URL, en faisant correspondre les règles de routage et les composants de rendu. Vue-router encapsule en interne le mécanisme de changement de routage, qui peut déterminer s'il faut avancer ou reculer en fonction des modifications apportées à l'URL, et afficher la vue correspondante. Dans le même temps, Vue-router fournit une API pratique pour acheminer les sauts et les remplacements dans les composants Vue. Maîtriser les principes et l'utilisation de Vue-router peut nous aider à mieux créer des applications monopage et à améliorer nos capacités de développement front-end.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!