页面刷新或单击 link 后，vue router 最后一条路线不呈现

Question

我最后一个 vue-router 组件在我单击菜单 link 时正常加载，但是当我共享 link 或刷新页面时，组件不呈现。我不知道可能是什么问题，因为它只发生在最后一条路线上。这是一个 link ：https://www.hvarboating.com/speed-boat-hire-hvar-flyer747

我的路由器：

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

Answer 1

你的最后两条路线有相同的路径/:id所以如果你通过路线名称切换路线它工作正常，但是当你刷新或使用link时，它不知道您要使用哪条路线，因此无法呈现组件。

解决方案：为每条路线使用唯一路径

页面刷新或单击 link 后，vue router 最后一条路线不呈现

vue router last route doesnt render after page refresh or clicking on the link

vue.js

vue-router

vuejs2