vue-router使用pathMatch(catchAll)+redirect报错Discarded invalid param(s) “pathMatch“ when navigating

在VueJS3的VueRouter配置中,用户遇到将`:pathMatch(.*)*`与`redirect`结合使用时产生错误的情况。查阅StackOverflow和GitHub上的相关问题,未找到直接解决该特定问题的答案。测试显示,`:pathMatch(.*)*`可使页面跳转至home视图但URL不变,而使用确定路径的`redirect`则能正常工作。目前,问题的原因尚不清楚,计划进一步研究文档以寻求解决方案。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

报错代码

{
     path: '/:pathMatch(.*)*', //‘/:matchAll(.*)*’
     redirect: { name: 'home' }
}

查阅相关报错解答

  1. vuejs3 - Vue Router - catch all wildcard not working - Stack Overflow

  1. https://github.com/vuejs/router/issues/951

  1. 从 Vue2 迁移 | Vue Router (vuejs.org)

没有找到既针对我的代码又针对我的报错的解释和解决方案,我做了如下测试:

  • 使用/:pathMatch(.*)*,但更改rediret部分:不会报错,页面跳转到home视图,但url不会随之更改。

{
      path: '/:pathMatch(.*)*',
      name: 'home',
      component: Home
    }
  • 使用redirect,但修改path为确定路径:不会报错,页面跳转且url修改(redirect完美执行)

{
      path: '/manage',
      redirect: { name: 'manage' }
    },
  1. 结论:redirect和/:pathMatch(.*)*同时使用时会有一些错误,具体的原理不太清楚,后续会继续查阅文档解决。

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值