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')

应该有用