vue路由的传参方法方式有三种

今天给大家介绍vue中使用路由跳转的传参方法

1.用动态绑定

路由配置

{
  path: 'child/:id',
  name: "child",
  component: () => import('./index.vue')
}

传参页面

this.$router.push({
  path: `/child/${id}` // 动态传的参数
});

获取页面

const params = this.$route.params

2.query传参

路由配置

{
  path: 'child',
  name: "child",
  component: () => import('./index.vue')
}

传参页面

this.$router.push({
  path: `/child`,
  query: {
  id: id
  }
});

获取页面

const params = this.$route.query

3.params传参

路由配置

{
  path: 'child',
  name: "child",
  component: () => import('./index.vue')
}

传参页面

this.$router.push({
  name: `child`, 
  params: {
  id: id
  }
});

获取页面

const params = this.$route.params

使用params传参一定要注意，不能用path属性跳转，可以用name。params对比上面两种的区别是地址栏里不会出现传递的参数，比较干净。

说到这，还有一种写法跟第一种类似。就是在path的最后以问号传参形式直接传入参数。如下面

{
path: `child?id=&{id}`
}

同样在params里获取