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')应该有用