VueJS2查询参数无法传递问题求助

一、获取URL中的token失败？用错对象了！ #

你当前URL里的token是URL查询参数（带?前缀的类型），这类参数要通过this.$route.query获取，而非this.$route.params——后者仅用于读取路由路径中定义的占位参数（比如/reset-password/:token格式里的token）。

修改后的代码：

created() {
    console.log(this.$route.query.token); // 能正确输出URL里的token值
},

二、router.push跳转传参失效？注意path和params的搭配规则 #

Vue Router中，使用path指定跳转路径时，params参数不会被解析到URL中，这是框架的默认规则。有两种可行的解决方式：

方式1：用路由名称（name）搭配params（需提前配置路由） #

先确保你的路由配置里给reset-password路由设置了name，并定义路径参数占位符：

// router/index.js
const routes = [
  {
    path: '/reset-password/:token', // 定义路径参数占位符
    name: 'ResetPassword',
    component: ResetPasswordComponent
  }
]

跳转时使用name指定路由：

this.$router.push({ name: 'ResetPassword', params: { token: 1234 } })

跳转后的URL会变为：http://link-to-app/reset-password/1234

方式2：直接用query参数传递（无需修改路由配置） #

如果想保留?token=xxx的URL格式，直接使用query字段传递参数即可：

this.$router.push({ path: '/reset-password', query: { token: 1234 } })

跳转后的URL会是：http://link-to-app/reset-password?token=1234

内容的提问来源于stack exchange，提问作者Ömer Faruk Demirel