vue2 使用路由跳转传参并接收

在Vue 2中，使用路由跳转并传递参数通常通过`this.$router.push()`或者`this.$router.go()`方法配合query参数或者path参数来实现。以下是两个常见的方法：

**1. Query参数（动态查询字符串）**：

// 跳转时传递参数
this.$router.push({
  path: '/detail',
  query: { id: '参数值' }
})

// 接收参数
methods: {
  handleDetail(id) {
    this.$router.push({ name: 'detail', params: { id } });
  }
}

在这个例子中，参数会作为URL查询字符串附加到路由路径后面，如`http://your-site.com/detail?id=参数值`。

**2. Path参数（路径参数）**：

// 路由配置
const routes = [
  {
    path: '/detail/:id', // :id是一个占位符，表示动态匹配的参数
    component: DetailComponent,
  }
];

// 跳转时传递参数
this.$router.push({ name: 'detail', params: { id: '参数值' } });

// 接收参数
created() {
  this.id = this.$route.params.id; // 在组件内部，可以直接访问params属性
}

在这种模式下，参数会被直接包含在路径中，比如`http://your-site.com/detail/参数值`。