Vue.js路由跳转报错：Uncaught Error: No match for - 解决方案

Vue.js路由跳转报错：Uncaught Error: No match for - 解决方案

本文将解决在Vue.js中使用router.push进行路由跳转时出现的“Uncaught Error: No match for”错误。

问题描述:

在两个页面之间进行跳转，其中一个页面使用了参数传递，另一个页面没有参数接收，导致报错。

代码示例:

2文件：

<el-button type='primary' size='small' link @click='toList(refundInfo.refund.refundId)'>返回上一级</el-button>

function toList(refundId?: string) {
  console.log('按下了返回上一页的按钮');
  
  router.push({
    name: 'RefundList',
    params: { id: refundId },
  });
}

1文件：

function toList() {
  console.log('这是toList方法');
  
  router.push({
    name: 'RefundList',
    // params: { id: refundId },
  });
}

报错信息:

Uncaught Error: No match for
{"name":"RefundList","params":{"id":"1690986457187586048"}}

错误原因:

在2文件中的点击事件中，router.push函数的参数不匹配。toList(refundInfo.refund.refundId)函数接受一个名为refundId的参数，但在router.push中使用了params: { id: refundId }传递参数，而1文件中的toList函数没有接收参数，导致匹配失败。

解决方法:

可以尝试在2文件中修改点击事件的函数为toList()，即不传递参数，并注释掉router.push中的params。

修改后的2文件代码：

<el-button type='primary' size='small' link @click='toList'>返回上一级</el-button>

function toList() {
  console.log('按下了返回上一页的按钮');
  
  router.push({
    name: 'RefundList',
  });
}

这样就可以从2文件跳转到1文件了。

总结:

在使用router.push进行路由跳转时，要确保传递的参数和接收的参数一致。如果两个页面之间需要传递参数，需要在目标页面接收参数，并在router.push中传递参数。