Mode historique du projet de vue

Cette fois, je vais vous présenter le mode Historique du projet Vue. Quelles sont les précautions lors de l'utilisation du mode Historique du projet Vue. Ce qui suit est un cas pratique, prenons un. regarder.

Mais il n'est pas difficile de constater que l'apparence de # est vraiment moche, et je ne sais pas ce que ça fait ?

J'ai donc cherché sur Stack Overflow, et bien sûr~ Il semble que Stack Overflow soit vraiment puissant. Les problèmes que vous rencontrez dans le projet ont en fait été posés et résolus ainsi

. C'est la réponse avec le plus de votes, qui consiste à définir le mode sur historique dans vue2. Après l'avoir essayé, cela fonctionne vraiment !

Mais sachant que cela résoudra le problème, mais ne sachant pas pourquoi, cela ne fonctionne pas, nous avons vu la documentation.

Par conséquent, cet article s'étend à la compréhension du document. Vous pouvez accéder directement au document. 

Pour les applications monopage développées par vue, lorsque nous basculons entre différentes pages, nous pouvons constater qu'il n'y a toujours qu'un seul code HTML. C'est vraiment la raison pour laquelle on l'appelle une seule page, et vue-router. Mode de hachage par défaut : utilise le hachage de l'URL pour simuler une URL complète. Ainsi, lorsque l'URL La page ne se rechargera pas une fois modifiée. Car pour une page normale, changer l’URL entraînera certainement un changement de page. Ce n'est que lorsque la requête chaîne et la valeur de hachage dans l'URL sont remplacées que la page ne sera pas rechargée. C'est la vérité ici.

Mais #ce formulaire est vraiment moche ! Alors, si vous ne le souhaitez pas, vous pouvez utiliser le mode historique de routage ! ! ! Ce mode utilise pleinement l'API history.pushState pour effectuer des sauts d'URL sans recharger la page.

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

Après avoir utilisé ce mode, il n'y a pas de #, mais vous pouvez y accéder comme une URL normale.   

Cependant, pour bien jouer dans ce mode, vous avez besoin d'une prise en charge de la 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 .

Par conséquent, vous devez 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.

Remarque : le backend du projet sur lequel je travaille actuellement ne prend pas en charge cette méthode, j'utiliserai donc d'abord la méthode # pour le développement.

Attention

Un mot d'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.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

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!