Vue 3使用Vue Router传参出现无效参数警告问题排查

核心错误点 #

1. 路由path未定义参数占位符
   Vue Router中，params 仅能对应路由path里声明的动态参数段。你的Invoice路由path为/invoice，未定义selectedEntries对应的占位符（如/:selectedEntries），因此传入的params会被判定为无效参数直接丢弃，这就是警告的来源。

2. 数据类型不匹配
   Invoice组件的selectedEntries props类型声明为Array，但你跳转时传递的是字符串'Test'，即便路由问题解决，组件也会因类型校验不通过而使用默认空数组。

解决方案 #

方案一：使用路由params传递（适合需在URL中显示参数的场景） #

1. 修改路由配置

在Invoice路由的path中添加动态参数占位符，并处理参数的序列化/反序列化（路由参数仅支持字符串，数组需转为JSON字符串传递）：

const routes = [
  {
    path: '/joblist',
    name: 'Joblist',
    component: () => import('../views/JobSelection.vue'),
  },
  {
    path: '/invoice/:selectedEntries', // 添加动态参数占位符
    name: 'Invoice',
    component: () => import('../views/Invoice.vue'),
    props: (route) => ({ 
      // 解码并反序列化参数为数组
      selectedEntries: JSON.parse(decodeURIComponent(route.params.selectedEntries)) 
    }),
  },
]

2. 修改跳转逻辑

将数组序列化为JSON字符串并编码后传递：

const navigateInvoice = () => {
  router.push({
    name: 'Invoice',
    params: { 
      // 编码序列化后的数组，避免特殊字符问题
      selectedEntries: encodeURIComponent(JSON.stringify(['Test'])) 
    }
  });
};

方案二：使用路由query传递（适合传递非URL必需的复杂数据） #

若无需在URL中显示参数，用query更灵活，无需修改路由path：

1. 修改路由配置

从route.query中获取参数并处理：

const routes = [
  {
    path: '/joblist',
    name: 'Joblist',
    component: () => import('../views/JobSelection.vue'),
  },
  {
    path: '/invoice',
    name: 'Invoice',
    component: () => import('../views/Invoice.vue'),
    props: (route) => ({ 
      selectedEntries: route.query.selectedEntries 
        ? JSON.parse(decodeURIComponent(route.query.selectedEntries)) 
        : []
    }),
  },
]

2. 修改跳转逻辑

用query代替params传递序列化后的数组：

const navigateInvoice = () => {
  router.push({
    name: 'Invoice',
    query: { 
      selectedEntries: encodeURIComponent(JSON.stringify(['Test'])) 
    }
  });
};

内容的提问来源于stack exchange，提问作者Jan Schmidt