「ページが更新されるかリンクがクリックされた後、vue ルーターの最後のルートはレンダリングされません。」
P粉277824378
P粉277824378 2023-08-26 10:27:45
0
1
561
<p>メニュー リンクをクリックすると、最後の vue-router コンポーネントが正常に読み込まれますが、リンクを共有するかページを更新すると、コンポーネントがレンダリングされません。最後のルートでのみ発生するため、何が問題なのかわかりません。</p> <p>これは 1 つの接続です:<a href="https://www.hvarboating.com/speed-boat-hire-hvar-flyer747">https://www.hvarboating.com/speed-boat -hire-hvar-flyer747</a></p> <p>我的路由器:</p> <pre class="brush:php;toolbar:false;">「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、 ルート、 }) デフォルトルーター</pre>をエクスポートします。
P粉277824378
P粉277824378

全員に返信(1)
P粉020085599

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

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

いいねを押す +0
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート