基于query和params的路由及传参

一、参数传递

1、query

• 类似于get，参数显示于地址栏
• 路径配置使用path或name都可以，使用path是基于path配置routes，直接把path路径添加到url上去；使用name是基于name配置routes，然后把name对应的path路径添加到url上去。

  <router-link :to="{path:'路径',query:{'参数名':参数值}}">路由</router-link>
  

  this.$router.push({name: '路径',query:{'参数名':参数值}})
  

2、params

• 类似于post，参数不显示与地址栏
• 路径配置只能使用name，不然会直接无视掉params中的内容。
• 常用于动态路由

  <router-link :to="{name:'路径',params:{'参数名':参数值}}">路由</router-link>
  

  this.$router.push({name: '路径',params:{'参数名':参数值}})
  

二、参数接收

1、query

• 使用 this.$route.query.参数名 接收

  data(){
      数据:this.$route.query.参数名,
  }
  

2、params

• 使用 this.$route.params.参数名 接收

  data(){
      数据:this.$route.params.参数名,
  }