"页面刷新或点击链接后，vue router的最后一个路由不会被渲染"
<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>
<pre class="brush:php;toolbar:false;">import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
export const routes = [
{
path: '/',
name: 'Home',
component: () => import(/* webpackChunkName: "about" */ '../views/Home')
},
{
path: '/blue-caves-croatia',
name: 'GroupToursDetails',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/GroupToursDetails')
},
{
path: '/boat-tours',
name: 'BoatTours',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/BoatTours')
},
{
path: '/hvar-boat-rental',
name: 'BoatRentals',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/BoatRentals')
},
{
path: '/from-split-to-Hvar-transfer',
name: 'BoatTransfers',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/BoatTransfers')
},
{
path: '/hvar-weather',
name: 'Weather',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/Weather')
},
{
path: '/frequently-asked-questions',
name: 'Faq',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/Faq')
},
{
path: '/contact',
name: 'Contact',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/Contact')
},
{
path: '/:id',
meta: {
sitemap: {
slugs: [
'blue-cave-tour-from-hvar',
'best-beaches-in-hvar-private',
'zlatni-rat-brac-island',
'boat-party-tour'
]
}
},
name: 'details',
props:true,
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/PrivateToursDetails')
},
{
path: '/:id',
meta: {
sitemap: {
slugs: [
'speed-boat-hire-hvar-flyer747',
'luxury-boat-hire-hvar-tornado38',
]
}
},
name: 'rentals',
props:true,
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/BoatRentDetails')
},
]
const router = new VueRouter({
scrollBehavior() {
return {x: 0, y: 0}
},
mode: 'history',
base: process.env.BASE_URL,
routes,
})
export default router</pre>
1
945
![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
你的最后两个路由具有相同的路径
/:id，所以如果你通过路由名称切换路由，它可以正常工作，但是当你刷新或使用链接时，它不知道你想要使用哪个路由，因此无法渲染组件。解决方案：为每个路由使用唯一的路径