vue路由传参 router-link和编程式传参方式

//路由中配置了如下对象：
let options= {
    routes:[
        {
            path:'/insertquery',
            name:'query1',
            component:()=>import('@/pages/insertquery')
        },
        {
            path:'/insertparams1/:id/:name',
            name:'params1',
            component:()=>import('@/pages/insertparams1')
        },
        {
            path:'/',
            component:()=>import('@/pages/home')
        }
    ]
}

<template>
  <div style="display: flex;flex-direction:column">
    <router-link :to=" '/insertquery?id='+dataId+'&name='+dataName">query传参</router-link>
    <router-link :to="`/insertquery?id=${dataId}&name=${dataName}`">query传参</router-link>
    <!--可以使用路由中的name和path中的任意一种-->
    <router-link :to="{path:'/insertquery',query:{id:dataId,name:dataName} }">query传参</router-link>
    <router-link :to="{name:'query1',query:{id:dataId,name:dataName} }">query传参</router-link>
      <button @click="queryBtn1">query传参</button>
      <button @click="queryBtn2">query传参</button>
  </div>
</template>
<script>
export default {
  name: "home",
  data(){
    return {
      dataId:222,
      dataName:'张三'
    }
  },
  methods:{
    queryBtn1(){
      this.$router.push({
        name:'query1',
        query:{id:'22',name:this.dataName}
      })
    },
    queryBtn2(){
      this.$router.push({
        path:'/insertquery',
        query:{id:this.dataId,name:this.dataName}
      })
    }
  }
}
</script>
<style scoped>
</style>

<template>
  <div style="display: flex;flex-direction:column">
    <router-link :to=" '/insertparams1/'+dataId+'/'+dataName">params传参</router-link>
    <router-link :to="`/insertparams1/${dataId}/${dataName}`">params传参</router-link>
    <router-link :to="{name:'params1',params:{id:dataId,name:dataName} }">params往动态路由中传递，刷新参数不丢失</router-link>
      <button @click="paramsBtn1">params往动态路由中传递,刷新参数不丢失</button>
      <!--注意：对象的形式中只能路由中的name跳转，往普通路由跳转，刷新后参数会丢失（对象形式下，params参数不在url中）-->
      <router-link :to="{name:'query1',params:{id:dataId,name:dataName} }">params往普通路由传递，刷新后会丢失</router-link>
      <button @click="paramsBtn2">params往普通路由传递，刷新后会丢失</button>
  </div>
</template>
<script>
export default {
  name: "home",
  data(){
    return {
      dataId:222,
      dataName:'张三'
    }
  },
  methods:{
    paramsBtn1(){
      //注意：params往动态路由中传递，刷新参数不丢失
      this.$router.push({
        name:'params1',
        params:{id:'22',name:this.dataName}
      })
    },
    paramsBtn2(){
      //注意：这里传递后，刷新后会丢失（对象形式下，params参数不在url中）
      this.$router.push({
        name:'query1',
        params:{id:'22',name:this.dataName}
      })
    }
  }
}
</script>
<style scoped>
</style>

this.$router.push({
         path: '/checkout',
         query:{
               productId:id,
          }
}）

this.$route.query.productId

http://xxx/#/goodsDetails?productId=150642571432849

// An highlighted block
this.$router.push({
         name: 'checkout',
         params:{
               productId:id,
          }
}）;

// An highlighted block
this.$route.params.productId

// An highlighted block
http://172.19.186.224:8080/#/checkout