„Nachdem die Seite aktualisiert oder auf den Link geklickt wurde, wird die letzte Route des Vue-Routers nicht gerendert.'

Question

Meine letzte Vue-Router-Komponente wird normal geladen, wenn ich auf den Menülink klicke, aber wenn ich den Link teile oder die Seite aktualisiere, wird die Komponente nicht gerendert. Ich weiß nicht, was das Problem sein könnte, da es nur auf der letzten Route auftritt.

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

我的路由器：

Vue aus 'vue' importieren
VueRouter aus „vue-router“ importieren

Vue.use(VueRouter)

const Routen exportieren = [
  {
    Weg: '/',
    Name: 'Zuhause',
    Komponente: () => import(/* webpackChunkName: "about" */ '../views/Home')

  },
  {
    Pfad: '/blue-caves-croatia',
    Name: 'GroupToursDetails',
    // Codeaufteilung auf Routenebene
    // Dadurch wird ein separater Chunk (about.[hash].js) für diese Route generiert
    // welches verzögert geladen wird, wenn die Route besucht wird.
    Komponente: () => import(/* webpackChunkName: "about" */ '../views/GroupToursDetails')
  },
  {
    Pfad: '/boat-tours',
    Name: 'BoatTours',
    // Codeaufteilung auf Routenebene
    // Dadurch wird ein separater Chunk (about.[hash].js) für diese Route generiert
    // welches verzögert geladen wird, wenn die Route besucht wird.
    Komponente: () => import(/* webpackChunkName: "about" */ '../views/BoatTours')
  },

  {
    Pfad: '/hvar-Bootsverleih',
    Name: 'BoatRentals',
    // Codeaufteilung auf Routenebene
    // Dadurch wird ein separater Chunk (about.[hash].js) für diese Route generiert
    // welches verzögert geladen wird, wenn die Route besucht wird.
    Komponente: () => import(/* webpackChunkName: "about" */ '../views/BoatRentals')
  },
  {
    Pfad: '/von-Split-nach-Hvar-Transfer',
    Name: 'Bootstransfers',
    // Codeaufteilung auf Routenebene
    // Dadurch wird ein separater Chunk (about.[hash].js) für diese Route generiert
    // welches verzögert geladen wird, wenn die Route besucht wird.
    Komponente: () => import(/* webpackChunkName: "about" */ '../views/BoatTransfers')
  },

  {
    Pfad: '/hvar-weather',
    Name: 'Wetter',
    // Codeaufteilung auf Routenebene
    // Dadurch wird ein separater Chunk (about.[hash].js) für diese Route generiert
    // welches verzögert geladen wird, wenn die Route besucht wird.
    Komponente: () => import(/* webpackChunkName: "about" */ '../views/Weather')
  },
  {
    Pfad: '/frequently-asked-questions',
    Name: 'FAQ',
    // Codeaufteilung auf Routenebene
    // Dadurch wird ein separater Chunk (about.[hash].js) für diese Route generiert
    // welches verzögert geladen wird, wenn die Route besucht wird.
    Komponente: () => import(/* webpackChunkName: "about" */ '../views/Faq')
  },
  {
    Pfad: '/Kontakt',
    Name: 'Kontakt',
    // Codeaufteilung auf Routenebene
    // Dadurch wird ein separater Chunk (about.[hash].js) für diese Route generiert
    // welches verzögert geladen wird, wenn die Route besucht wird.
    Komponente: () => import(/* webpackChunkName: "about" */ '../views/Contact')
  },
  {
    Pfad: '/:id',
    Meta: {
      Seitenverzeichnis: {
        Schnecken: [
          „Blaue-Höhlen-Tour-ab-Hvar“,
          'beste-strände-in-hvar-privat',
          'zlatni-rat-brac-insel',
          'Boot-Party-Tour'

        ]
      }
    },
    Name: 'Details',
    Requisiten: wahr,
    // Codeaufteilung auf Routenebene
    // Dadurch wird ein separater Chunk (about.[hash].js) für diese Route generiert
    // welches verzögert geladen wird, wenn die Route besucht wird.
    Komponente: () => import(/* webpackChunkName: "about" */ '../views/PrivateToursDetails')
  },
  {
    Pfad: '/:id',
    Meta: {
      Seitenverzeichnis: {
        Schnecken: [
          'speed-boat-hire-hvar-flyer747',
          'Luxusbootverleih-hvar-tornado38',


        ]
      }
    },
    Name: 'Vermietungen',
    Requisiten: wahr,
    // Codeaufteilung auf Routenebene
    // Dadurch wird ein separater Chunk (about.[hash].js) für diese Route generiert
    // welches verzögert geladen wird, wenn die Route besucht wird.
    Komponente: () => import(/* webpackChunkName: "about" */ '../views/BoatRentDetails')
  },
]

const router = new VueRouter({
  scrollBehavior() {
    return {x: 0, y: 0}
  },
  Modus: 'Geschichte',
  Basis: Process.env.BASE_URL,
  Routen,

})

Standardrouter exportieren

Answer 1

你的最后两个路由具有相同的路径/:id，所以如果你通过路由名称切换路由，它可以正常工作，但是当你刷新或使用链接时，它不知道你想要使用哪个路由，因此无法渲染组件。

解决方案：为每个路由使用唯一的路径