Vue Router 页面跳转与参数传递

1. Vue Router 页面跳转与参数传递

在点击某一行记录后，你希望跳转到详情页并携带 id。

Vue Router 提供两种传参方式：

① query 传参（URL 形式：/detail?id=123）

this.$router.push({
  path: '/case/detail',
  query: { id: record.id }
});

在目标页面获取：

this.$route.query.id

② params 传参（URL 形式：/detail/123）

前提：路由配置要包含动态参数：

path: '/case/detail/:id'

传参：

this.$router.push({
  name: 'case-detail',
  params: { id: record.id }
});

在目标页面获取：

this.$route.params.id

3.接口URL必须拼接正确

const res = await this.$post(`/api/data/getListData/${id}`);