Comment résoudre le problème selon lequel la page ne peut pas être rendue en mode Historique de routage Vue

Cet article présente principalement l'explication détaillée des raisons et des solutions à l'échec du rendu de la page dans le mode Historique du routage Vue. Il est d'une grande valeur pratique. Les amis dans le besoin peuvent se référer à

Causes causées par le mode Historique de routage sous Vue Raisons pour lesquelles la page ne peut pas être rendue

Il est très simple de créer une application monopage avec Vue.js + vue-router. En utilisant Vue.js, nous pouvons déjà composer des applications en combinant des composants. Lorsque vous souhaitez ajouter vue-router, ce que nous devons faire est de mapper les composants aux routes, puis d'indiquer à vue-router où les rendre.

L'URL d'une application monopage généralement développée aura un motif de hachage avec un signe #, car l'application entière elle-même n'a qu'un seul code HTML et le reste est rendu via le routeur. Si cela est dû à des besoins professionnels ou si vous avez simplement l'impression que le signe # n'est pas beau, vous pouvez utiliser le mode historique, en termes simples, ajoutez la ligne de code suivante au fichier de configuration Comment résoudre le problème selon lequel la page ne peut pas être rendue en mode Historique de routage Vue du routeur :

history: mode

C'est vrai, de sorte que l'URL n'aura plus le signe # et que vous constaterez que toute la barre d'adresse a retrouvé son aspect familier. Cependant, l'introduction suivante est peut-être très importante pour de nombreux nouveaux arrivants qui débutent. Je rencontrerai une telle chose ou deux. Quel piège...

La page ne peut pas être rendue

Voici un exemple de projet que j'ai écrit lorsque je me suis tourné. sur le mode historique, je n'ai fait aucun traitement sur le routage, tout est normal en phase Dev, mais après packaging, accédez au chemin du projet :

sdp.driver.com/driver/

et vous constaterez que la page est vide, mais les fichiers statiques sont tous normaux. La référence, car elle utilise le module dans YII, contiendra également le nom du module pilote en plus du nom de domaine. Généralement, les projets créés par de nombreuses personnes sont placés sous le répertoire racine, c'est-à-dire sous une forme telle que :

sdp.driver.com

, pas de problème. Mais si le module est configuré ou placé dans un sous-dossier, des problèmes surviendront. En fait, cela est dû au fait que le routeur ne peut pas trouver les composants dans le chemin, il ne peut donc pas être restitué. Modifiez simplement le fichier Comment résoudre le problème selon lequel la page ne peut pas être rendue en mode Historique de routage Vue dans le routeur et ajoutez le nom de votre projet à chaque chemin, et vous réussirez.

L'effet de page finale :

Erreur 404

dans En mode Historique, si vous accédez au chemin directement via la barre d'adresse, une erreur 404 se produira. En effet, il s'agit d'une application monopage (non-sens)... En fait, c'est parce que l'API history.pushState est appelée. , donc toutes les opérations telles que les sauts sont implémentées via le routeur. Il est très simple de résoudre ce problème. Il vous suffit de le configurer en arrière-plan pour accéder à l'index.html par défaut si l'URL ne correspond à aucune ressource statique. . La configuration spécifique est la suivante :

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>

nginx

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

Node.js (Express)

À propos du problème de l'actualisation de la page à chaque fois que vous cliquez sur un lien

Comme nous le savons tous, le développement d'applications d'une seule page est dû à une expérience fluide et soyeuse si la page est actualisée. chaque fois que vous cliquez...

La raison pour laquelle cela se produit est que window.location est utilisé pour sauter. Il vous suffit d'utiliser la méthode fournie par le routeur pour résoudre ce problème :

Dans la configuration de main.js, ajoutez un routeur Après la liaison au global

Vue.prototype.router = router;

, utilisez la méthode suivante pour contrôler le saut

this.router.push('driver/service');

Ce qui précède est l'intégralité du contenu de cet article, j'espère qu'il sera utile à l'apprentissage de chacun, plus Veuillez faire attention au site Web PHP chinois pour le contenu connexe !

Recommandations associées :

Comment interagir et vérifier les composants VueJS via des accessoires

Comment résoudre le problème de vuex dans le composant parent Le sous-composant d'état de mise à jour de la méthode ne peut pas être mis à jour et rendu à temps

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!