Vue-Router : Comment utiliser le mode historique pour implémenter un routage sans rafraîchissement ?

Vue-Router : Comment utiliser le mode historique pour implémenter un routage sans rafraîchissement ?

Introduction :
En tant que framework JavaScript populaire, Vue.js a été largement utilisé dans le développement front-end. Dans Vue.js, Vue-Router est un outil très important, qui peut implémenter la gestion du routage des applications monopage (SPA). Dans Vue-Router, vous avez le choix entre deux modes, l'un est le mode hachage et l'autre est le mode historique. Cet article expliquera en détail comment utiliser le mode historique de Vue-Router pour implémenter un routage sans actualisation et donnera des exemples de code spécifiques.

1. Comprendre le mode historique
   Lors de l'utilisation du mode historique dans Vue-Router, il n'y a pas de caractère # dans l'URL, mais l'API d'historique du navigateur est utilisée pour le changement de navigation. Dans ce mode, l'itinéraire semble plus beau et plus proche du chemin URL traditionnel.
2. Commencez à utiliser le mode historique
   L'utilisation du mode historique est très simple. Il vous suffit de définir l'attribut mode sur « historique » lors de la création d'une instance de Vue Router. Par exemple :

//引入Vue和Vue-Router
import Vue from 'vue'
import Router from 'vue-router'

//在Vue中使用Vue-Router插件
Vue.use(Router)

//定义路由
const router = new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/about',
      name: 'About',
      component: About
    }
  ]
})

//创建Vue实例，并将router实例添加到Vue实例中
new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

3. Configurer le serveur
   Lorsque vous utilisez le mode historique, vous devez configurer le serveur pour répondre aux requêtes URL. Car en mode historique, lors de l'actualisation de la page ou de l'accès direct à l'URL, une requête sera envoyée au serveur, il faudra donc configurer le serveur pour renvoyer la même page d'accueil (comme index.html).

Dans les logiciels serveur courants, tels qu'Apache et Nginx, cela peut être réalisé via des fichiers de configuration. Voici un exemple de configuration du serveur Apache :

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

4. Saut de page sans actualisation
   Après avoir utilisé le mode historique, Vue-Router écoutera automatiquement les événements de navigation du navigateur, et lorsque l'utilisateur clique sur un lien dans la page, le composant sera rendu Basculer sans actualiser la page entière, permettant un routage sans actualisation.

Supposons que nous ayons deux pages : Accueil et À propos. Dans la page d'accueil, nous pouvons ajouter un bouton qui renvoie vers la page À propos :

<template>
  <div>
    <h1>Welcome to Home Page!</h1>
    <router-link to="/about">About</router-link>
  </div>
</template>

Dans la page À propos, nous pouvons également ajouter un bouton qui renvoie vers la page d'accueil :

<template>
  <div>
    <h1>Welcome to About Page!</h1>
    <router-link to="/">Home</router-link>
  </div>
</template>

Lorsque l'utilisateur clique sur ces liens, la page ne rafraîchira pas Basculez directement vers le composant correspondant.

5. Résumé
   Le mode historique de Vue-Router implémente un changement d'itinéraire sans actualisation en utilisant l'API d'historique du navigateur. L'utilisation du mode historique peut rendre l'URL plus belle et plus proche du chemin d'URL traditionnel. Lorsque vous utilisez le mode historique, vous devez configurer le serveur pour qu'il renvoie la même page d'accueil pour répondre aux requêtes URL. En utilisant le composant router-link fourni par Vue-Router, nous pouvons facilement implémenter un routage sans rafraîchissement.

Avec les étapes ci-dessus, vous pouvez facilement utiliser le mode historique de Vue-Router pour implémenter un routage sans actualisation. J'espère que cet article vous aidera !

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!