Parlons de la façon dont vue empêche l'historique H5 d'actualiser la page

Avec la popularité des applications Web, les frameworks front-end sont devenus le premier choix des développeurs. Vue est l'un des frameworks populaires qui permet aux développeurs de créer des applications d'une seule page, améliorant ainsi l'expérience utilisateur et la fluidité. Cependant, de nombreux développeurs peuvent rencontrer un problème, à savoir comment empêcher l'historique H5 d'actualiser la page. Cet article vous expliquera comment résoudre ce problème dans une application Web H5 utilisant Vue.js.

Dans Vue.js, nous pouvons utiliser le "routage" pour résoudre ce problème. Les routes peuvent être définies dans Vue.js, nous permettant d'implémenter des applications monopage dans les applications Web H5. Le routage indique à la page quel composant doit être affiché à quelle URL. De cette façon, nous pouvons simuler des modifications du contenu de la page en modifiant cette URL au lieu d'actualiser la page entière. Par conséquent, le routage dans Vue.js masque la plupart des détails d'implémentation du site Web et offre une meilleure expérience utilisateur.

Avant d'apprendre comment empêcher l'historique H5 d'actualiser la page, nous devons d'abord implémenter le routage dans Vue.js. Nous utiliserons la bibliothèque vue-router, qui est l'une des bibliothèques officielles de Vue.js. Tout d’abord, nous devons installer cette bibliothèque dans notre projet. Nous pouvons utiliser npm ou Yarn, entrez la commande suivante dans la ligne de commande :

npm install vue-router

yarn add vue-router

Après avoir installé vue-router, nous devons l'importer dans notre application Vue.js et l'utiliser pour définir les itinéraires de l'application. Dans l'exemple suivant, nous allons créer un itinéraire pour afficher la page d'accueil, la page de connexion et la page d'inscription.

import VueRouter from 'vue-router';

Vue.use(VueRouter);

const routes = [
    { path: '/', component: HomePage },
    { path: '/login', component: LoginPage },
    { path: '/register', component: RegisterPage }
];

const router = new VueRouter({
    routes
});

Dans l'exemple ci-dessus, nous utilisons VueRouter pour importer des routes dans Vue.js et l'utilisons pour définir le chemin d'accès à l'application. Ces chemins spécifient le composant que l'application doit utiliser pour afficher la page. Dans cet exemple, nous avons défini trois chemins : la page d'accueil, la page de connexion et la page d'inscription. Nous pouvons désormais utiliser ces chemins dans notre application Vue.js au lieu de modifier la page entière.

Maintenant que nous avons défini notre site Web à l'aide de vue-router, nous utiliserons ensuite l'API d'historique de Vue.js et HTML5 pour empêcher l'historique H5 d'actualiser la page. L'API d'historique de HTML5 permet de modifier l'URL d'une page sans actualiser la page entière. En utilisant la méthode history.pushState() de HTML5, nous pouvons modifier l'URL et l'ajouter à l'historique du navigateur sans actualiser la page entière. Nous pouvons l'utiliser dans les composants Vue.js pour mettre à jour l'URL.

Dans l'exemple suivant, nous verrons comment utiliser la méthode history.pushState() de HTML5 dans Vue.js pour empêcher l'historique H5 d'actualiser la page. Nous appellerons cela dans la fonction de montage du cycle de vie de Vue.js pour garantir qu'elle est appelée lors du chargement de la page.

export default {
    mounted() {
        const path = window.location.pathname;
        history.pushState({ path }, '', path);
    }
}

Dans l'exemple ci-dessus, nous avons appelé la méthode history.pushState() dans le hook de cycle de vie Vue.js. Nous ajoutons l'URL à l'historique et renvoyons un objet à la méthode contenant le chemin que nous avons défini. Nous pouvons désormais mettre à jour l'URL sans actualiser la page entière.

Dans cet article, nous avons appris à utiliser le routage de Vue.js et l'API d'historique HTML5 pour empêcher l'historique H5 d'actualiser la page et améliorer les performances et l'expérience utilisateur du site Web. Pour y parvenir, nous avons utilisé la bibliothèque vue-router et le hook de cycle de vie Vue.js pour appeler la méthode HTML5 history.pushState(). Désormais, nous pouvons utiliser Vue.js pour développer de meilleures applications de sites Web H5 sans actualiser la page entière.

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!