首页  >  问答  >  正文

"页面刷新或点击链接后,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>
从 '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,
  路线,

})

导出默认路由器
P粉277824378P粉277824378420 天前511

全部回复(1)我来回复

  • P粉020085599

    P粉0200855992023-08-27 00:13:08

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

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

    回复
    0
  • 取消回复