"Une fois la page actualisée ou le lien cliqué, la dernière route de vue router ne sera pas rendue"

Question

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.

这是一个链接：https://www.hvarboating.com/speed-boat -hire-hvar-flyer747

我的路由器：

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

Answer 1

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