vue三种传参方式

方式1.用query    相当于用get,地址栏会暴露参数

传参：html方式

<router-link :to="{path:/xxx,query:{param1:2,param2:001}}"></router-link>

传参：jquery方式

<template>
  <div>
    <a @click="routerToQuery()">js方式query传参</a>
  </div>
</template>
<script>
export default {
  methods: {
    routerToQuery() {
      this.$router.push({
        path: `/xxx`,
        query: {
          param1: '2', param2: '001'
        }
      })
    }
  }
}
</script>

接受参数：this.$route.query.param1

 

 

方式2.用params   相当于用post,地址栏不会暴露参数,但是刷新页面会丢失参数

HTML的方式
　　<router-link :to="{name:xxx,params:{param1:1,param2:8899}}"></router-link>
JS的方式

<template>
  <div>
    <a @click="routerTo()">params传参</a>
  </div>
</template>
<script>
export default {
  methods: {
    routerTo() {
      this.$router.push({
        name: `xxx`,
        params: {
          param1: '1', param2: '8989'
        }
      })
    }
  }
}
</script>

接收参数  this.$route.params.param1

方式3.  通过：冒号的的形式+params   传递传参

地址栏会暴露参数,但是刷新页面不会丢失参数

在router的index.js里配置路由

{//加了?表示此参数可选（可以不传）
  path: '/ZTWarning/:warningResultId/:warningLogicId/:logicId/:logicName?',
  name: 'ZTWarning', 
  component: ZTWarning
}

传参

this.$router.push({
      name:'ZTWarning',
      params:{
           warningResultId:2,
           warningLogicId:'001',
           logicId: "001",    
      }
 });

接收参数  this.$route.params.warningResultId