<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')
},
{
路径：'/联系人'，
name: '联系方式',
// 路由级别代码分割
// 这会为此路由生成一个单独的块 (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，所以如果你通过路由名称切换路由，它可以正常工作，但是当你刷新或使用链接时，它不知道你想要使用哪个路由，因此无法渲染组件。解决方案：为每个路由使用唯一的路径