<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
,所以如果你透過路由名稱切換路由,它可以正常工作,但是當你刷新或使用連結時,它不知道你想要使用哪個路由,因此無法渲染元件。解決方案:為每個路由使用唯一的路徑