Vue路由传参详解-CSDN博客

父组件：

getDescribe1 (id) {
  this.$router.push({
    path: `/config1/${id}`
  })
}

路由：另外路由需要配置，在path中添加/:id来对应 $router.push 中path携带的参数

{
  path: '/config1/:id',
  name: 'Config1',
  component: Config1
},

这种方法参数值会跟在url后面，子组件通过this.$route.params.id获取传过去的参数
在这里插入图片描述

父组件：通过路由属性中的name来确定匹配的路由，通过params来传递参数。

getDescribe2 (id) {
  this.$router.push({
    name: 'Config2',
    params: {
      id: id
    }
  })
},

路由：路由不需要特别配置

{
    path: '/config2',
    name: 'Config2',
    component: Config2
  }

这种方法参数值不会出现在url种，子组件通过this.$route.params.id获取传过去的参数
在这里插入图片描述

父组件：使用path来匹配路由，然后通过query来传递参数

getDescribe3 (id) {
  this.$router.push({
    path: '/config3',
    query: {
      id: id
    }
  })
},

路由：不需要特别配置

{
    path: '/config3',
    name: 'Config3',
    component: Config3
 }

这种方法query传递的参数会显示在url后面?id=？，子组件通过this.$route.query.id获取传递的参数
在这里插入图片描述