"페이지를 새로 고치거나 링크를 클릭한 후에는 vue 라우터의 마지막 경로가 렌더링되지 않습니다."

Question

메뉴 링크를 클릭하면 마지막 vue-router 구성 요소가 정상적으로 로드되지만 링크를 공유하거나 페이지를 새로 고칠 때 구성 요소가 렌더링되지 않습니다. 마지막 경로에서만 발생하기 때문에 문제가 무엇인지 모르겠습니다.

这是一个链接：https://www.hvarboating.com/speed-boat -hire-hvar-flyer747

나의 길由器：

'vue'에서 Vue 가져오기
'vue-router'에서 VueRouter 가져오기

Vue.use(VueRouter)

const 경로 내보내기 = [
  {
    길: '/',
    이름: '집',
    구성요소: () => import(/* webpackChunkName: "about" */ '../views/Home')

  },
  {
    경로: '/blue-caves-croatia',
    이름: 'GroupToursDetails',
    // 경로 수준 코드 분할
    // 이 경로에 대해 별도의 청크(about.[hash].js)가 생성됩니다.
    // 경로를 방문할 때 지연 로드됩니다.
    구성요소: () => import(/* webpackChunkName: "about" */ '../views/GroupToursDetails')
  },
  {
    경로: '/boat-tours',
    이름: '보트 투어',
    // 경로 수준 코드 분할
    // 이 경로에 대해 별도의 청크(about.[hash].js)가 생성됩니다.
    // 경로를 방문할 때 지연 로드됩니다.
    구성요소: () => import(/* webpackChunkName: "about" */ '../views/BoatTours')
  },

  {
    경로: '/hvar-boat-rental',
    이름: '보트렌탈',
    // 경로 수준 코드 분할
    // 이 경로에 대해 별도의 청크(about.[hash].js)가 생성됩니다.
    // 경로를 방문할 때 지연 로드됩니다.
    구성요소: () => import(/* webpackChunkName: "about" */ '../views/BoatRentals')
  },
  {
    경로: '/split-to-Hvar-transfer',
    이름: 'BoatTransfers',
    // 경로 수준 코드 분할
    // 이 경로에 대해 별도의 청크(about.[hash].js)가 생성됩니다.
    // 경로를 방문할 때 지연 로드됩니다.
    구성요소: () => import(/* webpackChunkName: "about" */ '../views/BoatTransfers')
  },

  {
    경로: '/hvar-weather',
    이름: '날씨',
    // 경로 수준 코드 분할
    // 이 경로에 대해 별도의 청크(about.[hash].js)가 생성됩니다.
    // 경로를 방문할 때 지연 로드됩니다.
    구성요소: () => import(/* webpackChunkName: "about" */ '../views/Weather')
  },
  {
    경로: '/자주 묻는 질문',
    이름: '자주 묻는 질문',
    // 경로 수준 코드 분할
    // 이 경로에 대해 별도의 청크(about.[hash].js)가 생성됩니다.
    // 경로를 방문할 때 지연 로드됩니다.
    구성요소: () => import(/* webpackChunkName: "about" */ '../views/Faq')
  },
  {
    경로: '/연락처',
    이름: '연락처',
    // 경로 수준 코드 분할
    // 이 경로에 대해 별도의 청크(about.[hash].js)가 생성됩니다.
    // 경로를 방문할 때 지연 로드됩니다.
    구성요소: () => import(/* webpackChunkName: "about" */ '../views/Contact')
  },
  {
    경로: '/:id',
    메타: {
      사이트맵: {
        슬러그: [
          '흐바르에서 출발하는 푸른 동굴 투어',
          'hvar-private 최고의 해변',
          '즐라트니 라트 브라크 섬',
          '보트 파티 투어'

        ]
      }
    },
    이름: '세부정보',
    소품:사실,
    // 경로 수준 코드 분할
    // 이 경로에 대해 별도의 청크(about.[hash].js)가 생성됩니다.
    // 경로를 방문할 때 지연 로드됩니다.
    구성요소: () => import(/* webpackChunkName: "about" */ '../views/PrivateToursDetails')
  },
  {
    경로: '/:id',
    메타: {
      사이트맵: {
        슬러그: [
          '쾌속정 대여-hvar-flyer747',
          '럭셔리 보트 대여 hvar-tornado38',


        ]
      }
    },
    이름: '대여',
    소품:사실,
    // 경로 수준 코드 분할
    // 이 경로에 대해 별도의 청크(about.[hash].js)가 생성됩니다.
    // 경로를 방문할 때 지연 로드됩니다.
    구성요소: () => import(/* webpackChunkName: "about" */ '../views/BoatRentDetails')
  },
]

const 라우터 = 새로운 VueRouter({
  스크롤 동작() {
    {x: 0, y: 0}을 반환합니다.
  },
  모드: '역사',
  기본: process.env.BASE_URL,
  경로,

})

기본 라우터 내보내기

Answer 1

마지막 두 경로의 경로가 동일하므로 경로 이름으로 경로를 전환하면 제대로 작동하지만 링크를 새로 고치거나 사용할 때 어떤 경로를 사용할지 알 수 없으므로 구성 요소를 렌더링하지 못합니다. /:id

해결책: 각 경로에 고유한 경로를 사용하세요