vue中this.$router.push()路由传值和获取的两种常见方法汇总

下面就是关于“vue中this.$router.push()路由传值和获取的两种常见方法汇总”的完整攻略。

1. 使用query传参

this.$router.push()方法可以通过query传参，这种方式会将参数以key=value的形式拼接到url的后面，因此可以直接从url中获取参数。下面是示例代码：

// 路由跳转并传参
this.$router.push({
  path: '/targetRoute',
  query: {
    id: 1,
    name: 'lynn',
  },
})

// 获取传递的参数
this.$route.query.id
this.$route.query.name

可以看到，query传参的方式非常直接简单，直接在push方法中添加query参数即可。在跳转到目标路由后，可以通过$route.query对象获取url中的参数。

需要注意的是，这种方式传递的参数是以明文的方式拼接在url后面的，因此适合传递一些不太敏感的信息，如id、name等。对于一些敏感的信息，不建议使用这种方式传递。

2. 使用params传参

除了query传参外，vue还提供了使用params传参的方式。这种方式传递的参数不会拼接在url的后面，而是会作为路由的参数存在，因此可以更加安全和保密。下面是示例代码：

// 路由跳转并传参
this.$router.push({
  path: '/targetRoute/:id/:name',
  name: 'targetRoute',
  params: {
    id: 1,
    name: 'lynn',
  },
})

// 获取传递的参数
this.$route.params.id
this.$route.params.name

可以看到，params传参的方式需要在路由的path中添加参数占位符，然后在push方法的params参数中传入对应的参数值。在跳转到目标路由后，可以通过$route.params对象获取路由的参数。

需要注意的是，params传参的方式只适用于声明了带参数的路由，而且传递的参数需要在路由path中进行占位，并在路由设置中声明占位参数。因此这种方式适用于传递一些比较重要的、需要保密的参数信息。

以上就是vue中路由传参和获取的两种常见方式总结的详细攻略，希望可以对你有所帮助。