<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，
路線，
})
匯出預設路由器 
你的最後兩個路由具有相同的路徑
/:id，所以如果你透過路由名稱切換路由，它可以正常工作，但是當你刷新或使用連結時，它不知道你想要使用哪個路由，因此無法渲染元件。解決方案：為每個路由使用唯一的路徑