vue组件之间传值方式（Vue组件之间传参的方法汇总）

vue组件之间传值方式（Vue组件之间传参的方法汇总）this.$route.params.id 方案三：query参数传递类似get{ path: '/details' //相比第一种，少了路径参数 name: 'Details' component: Details } 在子组件中获取传递的参数值(跟第一种方案一样获取){ path: '/details/:id' //动态参数映射上面的${id} name: 'Details' component: Details } 在子组件中获取传递的参数值this.$route.params.id 方案二： params传参类似post this.$router.push({ name: 'Details' //注：name引用的是路由上的name，就是传递给那个路由的一个标识 params: { id: id } }) 路由配置如下:

现有如下场景，点击父组件的li元素跳转到子组件中，并携带参数，便于子组件获取数据。

父组件中：

<li v-for="item in list" @click="translateArguments(item.id)">

方案一：路由配置动态路径参数

methods： translateArguments(id) { this.$router.push({ path: `/details/${id}` })

路由配置如下:

{ path: '/details/:id' //动态参数映射上面的${id} name: 'Details' component: Details }

在子组件中获取传递的参数值

this.$route.params.id

方案二： params传参类似post

this.$router.push({ name: 'Details' //注：name引用的是路由上的name，就是传递给那个路由的一个标识 params: { id: id } })

路由配置如下:

{ path: '/details' //相比第一种，少了路径参数 name: 'Details' component: Details }

在子组件中获取传递的参数值(跟第一种方案一样获取)

this.$route.params.id

方案三：query参数传递类似get

父组件：使用path来匹配路由，然后通过query来传递参数 这种情况下 query传递的参数会显示在url后面?id=？

this.$router.push({ path: '/details' query: { id: id } })

路由配置如下(跟第二种方案一样):

{ path: '/details' name: 'Details' component: Details }

在子组件中获取传递的参数值

this.$route.query.id

$router $route的区别

在控制台打出this的时候，比较一下$route和$router

$route和$router

• $route为当前router跳转对象里面可以获取name、path、query、params...
• $router为VueRouter实例，想要导航到不同URL，则使用$router.push方法，返回上一个history也是使用$router.go方法