Vue路由器嘗試使用params作為名稱來匹配路由。
P粉826429907
P粉826429907 2023-07-27 21:18:01
0
1
693
<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>
P粉826429907
P粉826429907

全部回覆(1)
P粉817354783

你遇到的問題可能是因為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')

應該有用

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板