Vue Router は、params を名前として使用してルートを照合しようとします。
<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>