「ページが更新されるかリンクがクリックされた後、vue ルーターの最後のルートはレンダリングされません。」
P粉277824378
2023-08-26 10:27:45
<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>をエクスポートします。
最後の 2 つのルートは同じパス
/:id
を持っているため、ルート名でルートを切り替えると正常に機能しますが、更新したりリンクを使用したりすると、どのルートが実行されるのかがわかりません。を使用したいため、コンポーネントをレンダリングできません。解決策: 各ルートに一意のパスを使用します