Vue.js 3 Vite中$router.push报错：无效参数被丢弃求助

问题场景 #

当前Login路由配置：

{ path: '/login', component: () => import('pages/LoginPage.vue'), name:'Login', props: true },

执行路由跳转代码时：

this.$router.push({ name: 'Login', params: { test: 'eduardo' }, replace: true })

出现如下警告：

[Vue Router warn]: Discarded invalid param(s) "test" when navigating.

问题原因 #

Vue Router 要求，只有在路由的path中定义了对应的参数占位符时，params里的参数才会被视为有效参数。当前Login路由的path为/login，未定义任何参数占位符，因此传递的test参数被判定为无效并丢弃。

解决方案 #

方案一：修改路由配置，添加路径参数占位符 #

如果需要将test作为路由路径的一部分传递，修改路由配置如下：

{ 
  path: '/login/:test', // 添加参数占位符:test
  component: () => import('pages/LoginPage.vue'), 
  name:'Login', 
  props: true 
},

• 跳转后路由路径会变为/login/eduardo
• 由于设置了props: true，test参数会自动传入LoginPage.vue组件的props中，可直接在组件内通过props: ['test']接收

方案二：改用query传递参数（无需修改路由path） #

如果不需要参数出现在路由路径中，可使用query替代params传递参数：

this.$router.push({ name: 'Login', query: { test: 'eduardo' }, replace: true })

• 参数会以查询字符串形式显示在URL中，即/login?test=eduardo
• 在LoginPage.vue组件内，可通过this.$route.query.test获取该参数

补充说明 #

Vue Router 4+ 已移除了隐式params传递（即不定义路径占位符也能传递params的方式），因此如果需要传递非URL可见的参数，建议通过Vuex/Pinia状态管理、全局事件总线或组件间通信的其他方式实现。

内容的提问来源于stack exchange，提问作者Pratik Patel