"页面刷新或点击链接后，vue router的最后一个路由不会被渲染"

Question

<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，
  路线，

})

导出默认路由器

Answer 1

你的最后两个路由具有相同的路径/:id，所以如果你通过路由名称切换路由，它可以正常工作，但是当你刷新或使用链接时，它不知道你想要使用哪个路由，因此无法渲染组件。

解决方案：为每个路由使用唯一的路径