"After the page is refreshed or the link is clicked, the last route of vue router will not be rendered"
P粉277824378
P粉277824378 2023-08-26 10:27:45
0
1
543
<p>My last vue-router component loads normally when I click the menu link, but when I share the link or refresh the page, the component does not render. I don't know what the problem could be since it only happens on the last route.</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>
P粉277824378
P粉277824378

reply all(1)
P粉020085599

Your last two routes have the same path /:id, so if you switch routes by route name it works fine, but when you refresh or use a link it doesn't know you Which route do you want to use, so the component cannot be rendered.

Solution: Use a unique path for each route

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template