Vue路由器嘗試使用params作為名稱來匹配路由。
P粉826429907
2023-07-27 21:18:01
<p>我正在嘗試在我的路由中使用參數，並創建了以下路由。 </p>
<pre class="brush:php;toolbar:false;">export const ConsumerRoutes = [
{
path: '/' import.meta.env.VITE_MODULE_ADMIN_NAME '/consumers',
meta: {
requiresAuth: true,
adminLayout: true,
module: 'admin',
icon: UserCircleIcon,
nav: 'Consumers'
},
children: [
{
path: '',
name: 'Consumers',
component: () => import('../../views/admin/Consumer.vue'),
},
{
path: ':id',
name: 'Consumer Details',
component: () => import('../../views/admin/ConsumerDetails.vue'),
}
],
},
// {
// path: '/' import.meta.env.VITE_MODULE_ADMIN_NAME '/consumers/:id',
// meta: {
// requiresAuth: true,
// adminLayout: true,
// module: 'admin',
// excludeFromNav: true
// },
// children: [
// {
// path: '',
// name: 'Consumer Details',
// component: () => import('../../views/admin/ConsumerDetails.vue'),
// }
// ]
// }
];</pre>
<p>當我嘗試在URL中輸入/1時，我可以導航到consumers，但是我收到了以下錯誤。 </p>
<pre class="brush:php;toolbar:false;">vue-router.mjs:810 Uncaught (in promise) Error: No match for
{"name":"1","params":{}}</pre>
<p>但是，如果我在afterEach函數中使用console.log列印我的目標路由，我會得到以下路由物件。 </p><p>所以它知道我要去哪個路由，但出於某種原因，它正在使用'1'嘗試尋找一個名為'1'的路由。如果我將我的路由名稱更改為1，它就可以正常載入。 </p><p>我已經嘗試將我的路由從子路由拆分為獨立路由，但沒有改變任何東西。 </p><p><br /></p>
<hr />
<p>問題已解決，與我定義的路由無關。 </p>
你遇到的問題可能是因為Vue Router嘗試根據路由的名稱而不是路徑來匹配。
你試著導航到/consumers/1，希望"1"是一個路由參數(:id)。但是Vue Router將"1"解釋為路由名稱，因此你看到了錯誤訊息。
確保你使用的是路由路徑而不是路由名稱進行導航。在你的afterEach鉤子中，使用以下程式碼：
router.afterEach((to, from) => { router.push(to.path); });當手動導航時，請使用路徑（'/consumers/1'），而不是名稱。如果仍然遇到問題，可能是由於程式碼的其他部分。
以下是透過名稱導航到路由的範例程式碼：
router.push({ name: 'Consumer Details', params: { id: 1 } })而且，以下是透過路徑導航到路由的範例程式碼：
router.push('/consumers/1')應該有用