Qu'est-ce que le mode Historique HTML5

Mode de hachage par défaut de vue-router - utilise le hachage de l'URL pour simuler une URL complète, ainsi lorsque l'URL change, la page ne sera pas rechargée.

Si nous ne voulons pas d'un hachage laid, nous pouvons utiliser le mode historique de routage, qui utilise pleinement l'API history.pushState pour effectuer des sauts d'URL sans recharger la page.

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

Lorsque vous utilisez le mode historique, l'URL ressemble à une URL normale, telle que http://votresite.com/user/id, qui a également l'air bien !

Cependant, pour bien jouer à ce mode, vous avez également besoin d'un support de configuration en arrière-plan. Parce que notre application est une application client d'une seule page, si l'arrière-plan n'est pas configuré correctement, lorsque l'utilisateur accède directement à http://oursite.com/user/id dans le navigateur, 404 sera renvoyé, ce qui n'est pas beau .

Vous devez donc ajouter une ressource candidate côté serveur qui couvre toutes les situations : si l'URL ne correspond à aucune ressource statique, elle doit renvoyer la même page index.html, qui est la page de votre application. dépend.

Exemple de configuration backend

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

nginx

location / {
  try_files $uri $uri/ /index.html;
}

Node.js (Express)

https://github.com/bripkens / connect-history-api-fallback
Avertissement
Donnez-moi un avertissement, car après cela, votre serveur ne renverra plus de page d'erreur 404, car le fichier index.html sera renvoyé pour tous les chemins. Pour éviter cela, vous devez couvrir toutes les situations de routage dans votre application Vue, puis présenter une page 404.

const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '*', component: NotFoundComponent }
  ]
})

Ou, si vous utilisez Node.js comme backend, vous pouvez utiliser le routage côté serveur pour faire correspondre l'URL et renvoyer 404 lorsqu'aucune route ne correspond, implémentant ainsi une solution de secours.

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!