vue路由带参进行传值

vue.jpg

先看效果图

image.png

image.png

使用path父组件向子组件传值

parint

// 使用path父组件向子组件传值
 /**
 * 注意：
 * 1.使用path传值，path和query搭配
 * 2.传值使用$router
 */
this.$router.push({ path: 'page2', query: { tableData: this.tableData } })

子组件接收父组件传递的值

child

// 接收父组件使用path传值
 /**
 * 注意：
 * 1.接收的时候是$route,千万记住不能加r
 * 2.这里使用query
 */
this.$route.query.tableData

使用name进行传值

/**
 * 注意：
 * 1.使用name传值，name和params搭配
 * 2.传值同上使用$router
 */
  this.$router.push({ name: 'page2', params: { tableData: this.tableData } });

使用params接收父组件传递的值

// 接收父组件使用name传值
 /**
 * 注意：
 * 1.接收的时候是$route,千万记住不能加r
 * 2.这里使用params
 */
  var tableData = this.$route.params.tableData;