"頁面刷新或點擊連結後，vue router的最後一個路由不會被渲染"

Question

<p>當我點擊選單連結時，我的最後一個vue-router元件正常加載，但當我分享連結或刷新頁面時，元件不會渲染。我不知道可能是什麼問題，因為它只發生在最後一個路由上。</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>

從 'vue' 匯入 Vue
從 'vue-router' 匯入 VueRouter

Vue.use(VueRouter)

導出常數路由= [
  {
    小路： '/'，
    名稱：'家'，
    組件：() => import(/* webpackChunkName: "關於" */ '../views/Home')

  },
  {
    路徑：'/藍色洞穴-克羅埃西亞'，
    name: '團體旅遊詳情',
    // 路由等級程式碼分割
    // 這會為此路由產生一個單獨的區塊 (about.[hash].js)
    // 當存取路由時會延遲載入。
    組件：() => import(/* webpackChunkName: "關於" */ '../views/GroupToursDetails')
  },
  {
    路: '/乘船遊覽',
    名稱：“乘船遊覽”，
    // 路由等級程式碼分割
    // 這會為此路由產生一個單獨的區塊 (about.[hash].js)
    // 當存取路由時會延遲載入。
    組件：() => import(/* webpackChunkName: "關於" */ '../views/BoatTours')
  },

  {
    路徑: '/hvar-boat-rental',
    名稱：“船舶租賃”，
    // 路由等級程式碼分割
    // 這會為此路由產生一個單獨的區塊 (about.[hash].js)
    // 當存取路由時會延遲載入。
    組件：() => import(/* webpackChunkName: "關於" */ '../views/BoatRentals')
  },
  {
    路徑：'/從分裂到赫瓦爾轉移'，
    name: '船接送',
    // 路由等級程式碼分割
    // 這會為此路由產生一個單獨的區塊 (about.[hash].js)
    // 當存取路由時會延遲載入。
    組件：() => import(/* webpackChunkName: "關於" */ '../views/BoatTransfers')
  },

  {
    路徑: '/hvar-天氣',
    名稱：“天氣”，
    // 路由等級程式碼分割
    // 這會為此路由產生一個單獨的區塊 (about.[hash].js)
    // 當存取路由時會延遲載入。
    組件：() => import(/* webpackChunkName: "關於" */ '../views/Weather')
  },
  {
    路徑: '/常見問題',
    name: '常見問題',
    // 路由等級程式碼分割
    // 這會為此路由產生一個單獨的區塊 (about.[hash].js)
    // 當存取路由時會延遲載入。
    組件：() => import(/* webpackChunkName: "關於" */ '../views/Faq')
  },
  {
    路徑：'/聯絡人'，
    名稱：'聯絡人'，
    // 路由等級程式碼分割
    // 這會為此路由產生一個單獨的區塊 (about.[hash].js)
    // 當存取路由時會延遲載入。
    組件：() => import(/* webpackChunkName: "關於" */ '../views/Contact')
  },
  {
    路徑: '/:id',
    元：{
      網站地圖：{
        蛞蝓：[
          '來自赫瓦爾的藍色洞穴之旅',
          '赫瓦爾私人最佳海灘',
          '茲拉特尼拉特布拉奇島',
          “遊船派對”

        ]
      }
    },
    名稱：'詳細資料'，
    道具：真實，
    // 路由等級程式碼分割
    // 這會為此路由產生一個單獨的區塊 (about.[hash].js)
    // 當存取路由時會延遲載入。
    組件：() => import(/* webpackChunkName: "關於" */ '../views/PrivateToursDetails')
  },
  {
    路徑: '/:id',
    元：{
      網站地圖：{
        蛞蝓：[
          '快艇租賃-Hvar-flyer747',
          '豪華租船赫瓦爾龍捲風38',


        ]
      }
    },
    名稱：“出租”，
    道具：真實，
    // 路由等級程式碼分割
    // 這會為此路由產生一個單獨的區塊 (about.[hash].js)
    // 當存取路由時會延遲載入。
    組件：() => import(/* webpackChunkName: "關於" */ '../views/BoatRentDetails')
  },
]

const 路由器 = 新 VueRouter({
  滾動行為() {
    返回 {x: 0, y: 0}
  },
  模式：“歷史”，
  基底地址：process.env.BASE_URL，
  路線，

})

匯出預設路由器

Answer 1

你的最後兩個路由具有相同的路徑/:id，所以如果你透過路由名稱切換路由，它可以正常工作，但是當你刷新或使用連結時，它不知道你想要使用哪個路由，因此無法渲染元件。

解決方案：為每個路由使用唯一的路徑