Comment résoudre le problème selon lequel la page rendue n'est pas reflétée lorsque le routage Vue est actualisé en mode historique

Cette fois, je vais vous apporter une méthode pour gérer la page de rendu vueroute sans réflexion lors de l'actualisation en mode historique, et comment gérer la page de rendu sans réflexion lorsque vue route est actualisé en mode historiqueNotesQue sont les éléments suivants ? Jetons un coup d'œil à des cas réels.

Résoudre le problème selon lequel le routage imbriqué (sous-routage) de vue-router ne peut pas restituer la page lors de l'actualisation en mode historique. Le contenu spécifique est le suivant

. 1. Description des exceptions

À l'origine, le mode de hachage de vue-router était utilisé, mais l'URL en mode hachage doit avoir le symbole "#", ce qui non seulement semble inconfortable, mais détruit également le "#" dans le routage dans certains scénarios (le partage WeChat la page changera " #"Le contenu suivant est traité), vous devez donc utiliser le mode historique, puis laisser le backend modifier la configuration nginx :

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

vue-router utilise le mode historique + utilise le routage imbriqué :

const router = new Router({
 mode: 'history',
 routes: [
  {
   path: '/',
   component: mall,
   name: 'mall'
  },
  ……
  //我的银行卡
  {
   path: '/myCard',
   meta: { requireAuth: true },
   component: myCard,
   name: 'myCard',
   children:[
   { path:'', component: card},
   { path:'add', component: add}
   ]
  }
   ……
 ]
})

Lors de l'accès aux pages de routage et de routage imbriqué, l'affichage est normal, mais lors du rafraîchissement de la page, la page de routage imbriqué est anormale :

Le style de la page est complètement foiré. Jetez un œil aux fichiers statiques chargés par la requête de page. Tous les fichiers statiques sont au format 404 ;

2. Analyse des exceptions

1. Lisez la description du routage imbriqué dans la documentation officielle :

2. En regardant à nouveau la page d'exception précédente, il semble que notre route parent soit devenue le répertoire racine. Vérifiez le chemin du fichier :

.

3. Regardons les fichiers d'exception que nous avons introduits. Ils sont directement référencés par

dans le fichier index.html, c'est-à-dire qu'ils sont introduits sous le chemin racine. Dans le mode de hachage précédent, le chemin racine ne changera pas, il nous est donc possible d'introduire directement ces fichiers statiques dans le fichier index.html. Cependant, après avoir utilisé le mode historique, le chemin racine n'est pas corrigé. Alors cette méthode d'introduction n'est pas réalisable, c'est pourquoi la page ci-dessus ne peut pas être rendue :

3. Résoudre le problème

C'est un peu gênant ici. J'ai d'abord envisagé d'introduire des fichiers de style statique dans la vue principale via l'importation, ce qui était effectivement réalisable, mais au final j'ai trouvé qu'il était acceptable de modifier directement le chemin d'introduction du fichier statique dans le fichier index.html. fichier :

Avant modification :

Après modification

<script src="./static/js/stomp.js"></script>

<script src="/static/js/stomp.js"></script>

4.Principe

./ fait référence au répertoire actuel où se trouve l'utilisateur (chemin relatif

) / fait référence au répertoire racine (chemin absolu, répertoire racine du projet), qui est le répertoire racine du projet

; Pour le mode hachage, le chemin racine est fixe, qui est le répertoire racine du projet. Cependant, en mode historique, le chemin imbriqué commençant par

sera considéré comme le chemin racine, donc si vous utilisez "./" pour introduisez le fichier, vous ne pourrez pas le trouver. Le fichier est atteint, car le fichier lui-même se trouve dans le répertoire racine du projet, pas dans le répertoire de chemin imbriqué.

/

Résumé

, quel que soit le mode de hachage ou le mode historique, vous pouvez directement utiliser "/" pour importer des fichiers statiques depuis le répertoire racine du projet.

PS : J'ai rencontré ce problème il y a quelque temps. Après de longues recherches sur Baidu, j'ai constaté que peu de personnes posaient cette question et que personne n'y répondait. J'ai également interrogé de nombreux experts front-end, mais je n'ai toujours pas pu résoudre ce problème. C'est peut-être parce que j'ai l'habitude d'écrire « ./ » Et le chemin commençant par "../", je n'ai pas remarqué le problème de la façon d'introduire les fichiers statiques, et j'ai essayé de nombreuses méthodes. Finalement, j'ai découvert avec embarras que le problème était en fait très simple, c'était juste que je. je n'avais pas une compréhension approfondie du cadre sous-jacent !

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 :

Comment connecter node.js à MySQL

Explication détaillée des étapes pour implémenter le serveur React rendu

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!