vue的url传参与获取参数

在Vue中，URL传参通常涉及到两个方面：如何在路由跳转时携带参数，以及如何在目标组件中获取这些参数。以下是具体的方法：

路由跳转时携带参数

使用query参数：类似于GET请求中的查询字符串，可以在跳转时使用this.$router.push或this.$router.replace方法，并通过query对象传递参数。

this.$router.push({ path: '/destination', query: { id: 1, name: 'Vue' } });

使用params参数：如果使用命名路由，可以通过params传递参数，但这要求路由中定义了相应的动态段[1]。

this.$router.push({ name: 'user', params: { userId: 123 } });

获取URL参数

获取query参数：在目标组件中，可以通过this.$route.query来访问这些参数。

created() {
  const id = this.$route.query.id;
  const name = this.$route.query.name;
}

获取params参数：如果参数是通过params传递的，可以通过this.$route.params来获取。

created() {
  const userId = this.$route.params.userId;
}

注意事项

当使用query时，参数会显示在URL中，用户可以看到并修改它们。
当使用params时，如果不是通过<router-link>跳转，而是使用push或replace方法，那么定义路由时需要指定参数的动态路径片段，例如/user/:userId。
在Vue 3中，如果使用Composition API，可以通过useRoute和useRouter来获取路由信息和执行路由跳转。

import { useRoute, useRouter } from 'vue-router';

setup() {
  const route = useRoute();
  const router = useRouter();

  const userId = route.params.userId;
  const goBack = () => router.back();

  return { userId, goBack };
}

使用这些方法，你可以在Vue应用中灵活地进行URL传参和参数获取，以实现复杂的导航和数据传递需求。