「ページが更新されるかリンクがクリックされた後、vue ルーターの最後のルートはレンダリングされません。」

Question

メニュー リンクをクリックすると、最後の vue-router コンポーネントが正常に読み込まれますが、リンクを共有するかページを更新すると、コンポーネントがレンダリングされません。最後のルートでのみ発生するため、何が問題なのかわかりません。

これは 1 つの接続です:https://www.hvarboating.com/speed-boat -hire-hvar-flyer747

我的路由器：

「vue」から Vue をインポート
「vue-router」から VueRouter をインポートします

Vue.use(VueRouter)

const ルートのエクスポート = [
  {
    パス： '/'、
    名前: 「ホーム」、
    コンポーネント: () => import(/* webpackChunkName: "about" */ '../views/Home')

  }、
  {
    パス: '/青の洞窟-クロアチア',
    名前: 'グループツアーの詳細',
    // ルートレベルのコード分割
    // これにより、このルート用に別のチャンク (about.[hash].js) が生成されます
    // ルートが訪問されたときに遅延ロードされます。
    コンポーネント: () => import(/* webpackChunkName: "about" */ '../views/GroupToursDetails')
  }、
  {
    パス: '/ボートツアー',
    名前: 'ボートツアー'、
    // ルートレベルのコード分割
    // これにより、このルート用に別のチャンク (about.[hash].js) が生成されます
    // ルートが訪問されたときに遅延ロードされます。
    コンポーネント: () => import(/* webpackChunkName: "about" */ '../views/BoatTours')
  }、

  {
    パス: '/hvar-boat-rental',
    名前: 'ボートレンタル'、
    // ルートレベルのコード分割
    // これにより、このルート用に別のチャンク (about.[hash].js) が生成されます
    // ルートが訪問されたときに遅延ロードされます。
    コンポーネント: () => import(/* webpackChunkName: "about" */ '../views/BoatRentals')
  }、
  {
    パス: '/from-split-to-Hvar-transfer',
    名前: 'ボートトランスファー'、
    // ルートレベルのコード分割
    // これにより、このルート用に別のチャンク (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',
    メタ: {
      サイトマップ: {
        ナメクジ: [
          'フヴァル島発青の洞窟ツアー',
          'フヴァル島のベストビーチ-プライベート',
          「ズラトニラットブラチ島」、
          「ボートパーティーツアー」

        ]
      }
    }、
    名前: '詳細'、
    小道具:本当、
    // ルートレベルのコード分割
    // これにより、このルート用に別のチャンク (about.[hash].js) が生成されます
    // ルートが訪問されたときに遅延ロードされます。
    コンポーネント: () => import(/* webpackChunkName: "about" */ '../views/PrivateToursDetails')
  }、
  {
    パス: '/:id',
    メタ: {
      サイトマップ: {
        ナメクジ: [
          'スピードボートレンタル-hvar-flyer747',
          '高級ボートレンタル-フヴァル-トルネード38',


        ]
      }
    }、
    名前: 'レンタル'、
    小道具:本当、
    // ルートレベルのコード分割
    // これにより、このルート用に別のチャンク (about.[hash].js) が生成されます
    // ルートが訪問されたときに遅延ロードされます。
    コンポーネント: () => import(/* webpackChunkName: "about" */ '../views/BoatRentDetails')
  }、
]

const router = new VueRouter({
  スクロールビヘイビア() {
    {x: 0, y: 0}を返します
  }、
  モード: '履歴'、
  ベース: process.env.BASE_URL、
  ルート、

})

デフォルトルーター

をエクスポートします。

Answer 1

最後の 2 つのルートは同じパス /:id を持っているため、ルート名でルートを切り替えると正常に機能しますが、更新したりリンクを使用したりすると、どのルートが実行されるのかがわかりません。を使用したいため、コンポーネントをレンダリングできません。

解決策: 各ルートに一意のパスを使用します