"Une fois la page actualisée ou le lien cliqué, la dernière route de vue router ne sera pas rendue"
P粉277824378
P粉277824378 2023-08-26 10:27:45
0
1
554
<p>Mon dernier composant vue-router se charge normalement lorsque je clique sur le lien du menu, mais lorsque je partage le lien ou actualise la page, le composant ne s'affiche pas. Je ne sais pas quel pourrait être le problème puisque cela n'arrive que sur le dernier itinéraire.</p> <p>这是一个链接:<a href="https://www.hvarboating.com/speed-boat-hire-hvar-flyer747">https://www.hvarboating.com/speed-boat -hire-hvar-flyer747</a></p> <p>我的路由器:</p> <pre class="brush:php;toolbar:false;">importer Vue depuis 'vue' importer VueRouter depuis 'vue-router' Vue.use(VueRouter) exporter des routes const = [ { chemin: '/', nom : 'Maison', composant : () => import(/* webpackChunkName : "à propos" */ '../views/Home') }, { chemin : '/blue-grottes-croatie', nom : 'GroupToursDetails', // fractionnement de code au niveau de la route // cela génère un morceau séparé (about.[hash].js) pour cette route // qui est chargé paresseusement lorsque l'itinéraire est visité. composant : () => import(/* webpackChunkName : "à propos" */ '../views/GroupToursDetails') }, { chemin : '/excursions en bateau', nom : 'BoatTours', // fractionnement de code au niveau de la route // cela génère un morceau séparé (about.[hash].js) pour cette route // qui est chargé paresseusement lorsque l'itinéraire est visité. composant : () => import(/* webpackChunkName : "à propos" */ '../views/BoatTours') }, { chemin : '/hvar-boat-location', nom : 'BoatRentals', // fractionnement de code au niveau de la route // cela génère un morceau séparé (about.[hash].js) pour cette route // qui est chargé paresseusement lorsque l'itinéraire est visité. composant : () => import(/* webpackChunkName : "à propos" */ '../views/BoatRentals') }, { chemin : '/de-split-à-Hvar-transfer', nom : 'Transferts en bateau', // fractionnement de code au niveau de la route // cela génère un morceau séparé (about.[hash].js) pour cette route // qui est chargé paresseusement lorsque l'itinéraire est visité. composant : () => import(/* webpackChunkName : "à propos" */ '../views/BoatTransfers') }, { chemin : '/hvar-météo', nom : 'Météo', // fractionnement de code au niveau de la route // cela génère un morceau séparé (about.[hash].js) pour cette route // qui est chargé paresseusement lorsque l'itinéraire est visité. composant : () => import(/* webpackChunkName : "à propos" */ '../views/Weather') }, { chemin : '/questions fréquemment posées', nom : 'FAQ', // fractionnement de code au niveau de la route // cela génère un morceau séparé (about.[hash].js) pour cette route // qui est chargé paresseusement lorsque l'itinéraire est visité. composant : () => import(/* webpackChunkName : "à propos" */ '../views/Faq') }, { chemin : '/contact', nom : 'Contact', // fractionnement de code au niveau de la route // cela génère un morceau séparé (about.[hash].js) pour cette route // qui est chargé paresseusement lorsque l'itinéraire est visité. composant : () => import(/* webpackChunkName : "à propos" */ '../views/Contact') }, { chemin : '/:id', méta : { plan du site : { limaces : [ 'visite-de-la-grotte-bleue-depuis-hvar', 'les meilleures-plages-de-hvar-privées', 'l'île de zlatni-rat-brac', 'excursion en bateau' ] } }, nom : 'détails', accessoires: vrai, // fractionnement de code au niveau de la route // cela génère un morceau séparé (about.[hash].js) pour cette route // qui est chargé paresseusement lorsque l'itinéraire est visité. composant : () => import(/* webpackChunkName : "à propos" */ '../views/PrivateToursDetails') }, { chemin : '/:id', méta : { plan du site : { limaces : [ 'location-de-speed-boat-hvar-flyer747', 'location-de-bateau-de-luxe-hvar-tornado38', ] } }, nom : 'locations', accessoires: vrai, // fractionnement de code au niveau de la route // cela génère un morceau séparé (about.[hash].js) pour cette route // qui est chargé paresseusement lorsque l'itinéraire est visité. composant : () => import(/* webpackChunkName : "à propos" */ '../views/BoatRentDetails') }, ] const routeur = nouveau VueRouter ({ scrollBehavior() { retourner {x : 0, y : 0} }, mode : 'historique', base : process.env.BASE_URL, les itinéraires, }) exporter le routeur par défaut</pre>
P粉277824378
P粉277824378

répondre à tous(1)
P粉020085599

Vos deux dernières routes ont le même chemin/:id, donc si vous changez de route par nom de route, cela fonctionne bien, mais lorsque vous actualisez ou utilisez un lien, il ne sait pas quelle route vous souhaitez utiliser et ne parvient donc pas à restituer le composant.

Solution : utilisez un chemin unique pour chaque itinéraire

Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal