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 ;

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 :

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 :

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

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

./ 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

/

, 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 !

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!