Vue Router は、params を名前として使用してルートを照合しようとします。

Question

<p>ルートでパラメータを使用しようとしており、次のルートを作成しました。 </p> <pre class="brush:php;toolbar:false;">export const ConsumerRoutes = [ { パス: '/' import.meta.env.VITE_MODULE_ADMIN_NAME '/consumers', メタ: { 認証が必要: true、 adminLayout: true、 モジュール: '管理者'、 アイコン: UserCircleIcon、 ナビ: 「消費者」 }、 子供たち： [ { パス： ''、 名前: '消費者'、 コンポーネント: () => import('../../views/admin/Consumer.vue'), }、 { パス: ':id'、 名前: '消費者の詳細'、 コンポーネント: () => import('../../views/admin/ConsumerDetails.vue'), } ]、 }、 // { // パス: '/' import.meta.env.VITE_MODULE_ADMIN_NAME '/consumers/:id', // メタ: { // 認証が必要: true, // adminLayout: true, // モジュール: '管理者', // excludeFromNav: true // }、 // 子供たち： [ // { // パス： ''、 // 名前: '消費者の詳細', // コンポーネント: () => import('../../views/admin/ConsumerDetails.vue'), // } //] // } ];</pre> <p>URL に /1 を入力しようとすると、コンシューマに移動できますが、次のエラーが表示されます。 </p> <pre class="brush:php;toolbar:false;">vue-router.mjs:810 キャッチされません (約束内) エラー: 一致しません {"name":"1","params":{}}</pre> <p>ただし、afterEach 関数で console.log を使用してターゲット ルートを出力すると、次のルート オブジェクトが得られます。 </p><p>つまり、私がどのルートに行くのかはわかっていますが、何らかの理由で、「1」という名前のルートを見つけようとして「1」を使用しています。ルート名を 1 に変更すると、正常に読み込まれます。 </p><p>ルートを子ルートから独立したルートに分割しようとしましたが、何も変わりませんでした。 </p>

---

<p>問題は解決されましたが、私が定義したルートとは何の関係もありません。 </p>

Answer 1

あなたが発生している問題は、Vue Router がパスではなくルートの名前に基づいて照合しようとしていることが原因である可能性があります。

「1」がルート パラメーター (:id) であることを期待して、/consumers/1 に移動しようとしています。ただし、Vue Router は「1」をルート名として解釈するため、エラー メッセージが表示されます。

ルート名ではなく、ルート パスを使用して移動するようにしてください。 afterEach フックで、次のコードを使用します:

リーリー

手動で移動する場合は、名前ではなくパス ('/consumers/1') を使用してください。それでも問題が解決しない場合は、コードの別の部分が原因である可能性があります。

次は、名前でルートに移動するためのサンプル コードです:

リーリー

また、パスによってルートに移動するためのサンプル コードも示します:

リーリー

役立つはずです