"Selepas halaman dimuat semula atau pautan diklik, laluan terakhir penghala vue tidak akan dipaparkan"

Question

Komponen vue-router terakhir saya dimuatkan secara normal apabila saya mengklik pautan menu, tetapi apabila saya berkongsi pautan atau memuat semula halaman, komponen itu tidak dipaparkan. Saya tidak tahu apa masalahnya kerana ia hanya berlaku pada laluan terakhir.

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

我的路由器：

import Vue daripada 'vue'
import VueRouter daripada 'vue-router'

Vue.use(VueRouter)

laluan const eksport = [
  {
    laluan: '/',
    nama: 'Rumah',
    komponen: () => import(/* webpackChunkName: "about" */ '../views/Home')

  },
  {
    laluan: '/blue-caves-croatia',
    nama: 'GroupToursDetails',
    // pemisahan kod peringkat laluan
    // ini menjana ketulan berasingan (kira-kira.[hash].js) untuk laluan ini
    // yang malas dimuatkan apabila laluan itu dilawati.
    komponen: () => import(/* webpackChunkName: "about" */ '../views/GroupToursDetails')
  },
  {
    laluan: '/boat-tours',
    nama: 'BoatTours',
    // pemisahan kod peringkat laluan
    // ini menjana ketulan berasingan (kira-kira.[hash].js) untuk laluan ini
    // yang malas dimuatkan apabila laluan itu dilawati.
    komponen: () => import(/* webpackChunkName: "about" */ '../views/BoatTours')
  },

  {
    laluan: '/hvar-boat-rental',
    nama: 'BoatRentals',
    // pemisahan kod peringkat laluan
    // ini menjana ketulan berasingan (kira-kira.[hash].js) untuk laluan ini
    // yang malas dimuatkan apabila laluan itu dilawati.
    komponen: () => import(/* webpackChunkName: "about" */ '../views/BoatRentals')
  },
  {
    laluan: '/from-split-to-Hvar-transfer',
    nama: 'BoatTransfers',
    // pemisahan kod peringkat laluan
    // ini menjana ketulan berasingan (kira-kira.[hash].js) untuk laluan ini
    // yang malas dimuatkan apabila laluan itu dilawati.
    komponen: () => import(/* webpackChunkName: "about" */ '../views/BoatTransfers')
  },

  {
    laluan: '/hvar-weather',
    nama: 'Cuaca',
    // pemisahan kod peringkat laluan
    // ini menjana ketulan berasingan (kira-kira.[hash].js) untuk laluan ini
    // yang malas dimuatkan apabila laluan itu dilawati.
    komponen: () => import(/* webpackChunkName: "about" */ '../views/Weather')
  },
  {
    laluan: '/soalan-lazim',
    nama: 'Faq',
    // pemisahan kod peringkat laluan
    // ini menjana ketulan berasingan (kira-kira.[hash].js) untuk laluan ini
    // yang malas dimuatkan apabila laluan itu dilawati.
    komponen: () => import(/* webpackChunkName: "about" */ '../views/Faq')
  },
  {
    laluan: '/contact',
    nama: 'Hubungi',
    // pemisahan kod peringkat laluan
    // ini menjana ketulan berasingan (kira-kira.[hash].js) untuk laluan ini
    // yang malas dimuatkan apabila laluan itu dilawati.
    komponen: () => import(/* webpackChunkName: "about" */ '../views/Contact')
  },
  {
    laluan: '/:id',
    meta: {
      peta laman: {
        siput: [
          'pelancongan-gua-biru-dari-hvar',
          'pantai-terbaik-di-hvar-peribadi',
          'zlatni-rat-brac-island',
          'lawatan-parti-bot'

        ]
      }
    },
    nama: 'butiran',
    props:benar,
    // pemisahan kod peringkat laluan
    // ini menjana ketulan berasingan (kira-kira.[hash].js) untuk laluan ini
    // yang malas dimuatkan apabila laluan itu dilawati.
    komponen: () => import(/* webpackChunkName: "about" */ '../views/PrivateToursDetails')
  },
  {
    laluan: '/:id',
    meta: {
      peta laman: {
        siput: [
          'sewa-bot laju-hvar-flyer747',
          'sewa-bot-mewah-hvar-tornado38',


        ]
      }
    },
    nama: 'sewaan',
    props:benar,
    // pemisahan kod peringkat laluan
    // ini menjana ketulan berasingan (kira-kira.[hash].js) untuk laluan ini
    // yang malas dimuatkan apabila laluan itu dilawati.
    komponen: () => import(/* webpackChunkName: "about" */ '../views/BoatRentDetails')
  },
]

penghala const = VueRouter baharu({
  scrollBehavior() {
    pulangkan {x: 0, y: 0}
  },
  mod: 'sejarah',
  asas: process.env.BASE_URL,
  laluan,

})

eksport penghala lalai            

Answer 1

Dua laluan terakhir anda mempunyai laluan yang sama/:id, jadi jika anda menukar laluan mengikut nama laluan, ia berfungsi dengan baik, tetapi apabila anda memuat semula atau menggunakan pautan, ia tidak tahu laluan mana yang anda mahu gunakan dan oleh itu gagal untuk memaparkan komponen .

Penyelesaian: Gunakan laluan unik untuk setiap laluan