Vue路由器嘗試使用params作為名稱來匹配路由。

Question

我正在嘗試在我的路由中使用參數，並創建了以下路由。

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'),
  // }
  // ]
  // }
];

當我嘗試在URL中輸入/1時，我可以導航到consumers，但是我收到了以下錯誤。

vue-router.mjs:810 Uncaught (in promise) Error: No match for
 {"name":"1","params":{}}

但是，如果我在afterEach函數中使用console.log列印我的目標路由，我會得到以下路由物件。

所以它知道我要去哪個路由，但出於某種原因，它正在使用'1'嘗試尋找一個名為'1'的路由。如果我將我的路由名稱更改為1，它就可以正常載入。

我已經嘗試將我的路由從子路由拆分為獨立路由，但沒有改變任何東西。

---

問題已解決，與我定義的路由無關。

Answer 1

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

應該有用