Vue路由问题：页面传query后无法通过$route.params获取参数

你这里遇到的是路由传参时query和params的混淆问题，很容易踩坑，我来帮你理清：

核心错误点 #

你通过query传递的参数，却试图用this.$route.params去获取——这两个是完全不同的参数存储对象，对应不同的传参方式。

为什么会这样？ #

你在Page1的传参代码是对的：

this.$router.push({name: 'physicalserver_task_one_key', query: {task_id: params.row.id}})

地址栏也显示了?task_id=25，说明参数已经成功传递到地址栏的查询参数中了。

但this.$route.params是用来获取动态路由参数的（比如你的路由配置如果是/physicalserver_task_one_key_put_in_storage/:task_id，这种带冒号的占位符参数才会存在params里），而地址栏?后面的参数属于query范畴，必须通过this.$route.query来获取。

正确的获取代码 #

把你的获取代码改成：

this.$route.query.task_id

这样就能拿到值为25的task_id了。

额外补充：query和params的区别 #

• query传参：参数会暴露在地址栏，类似HTTP GET请求的查询参数，页面刷新后参数不会丢失
• params传参：分为两种情况：
  1. 动态路由参数：配置在路由规则里的占位符参数，会显示在地址栏，刷新不丢失
  2. 隐式传参：不配置动态路由，直接通过params字段传参，参数不会显示在地址栏，但页面刷新后会丢失

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