方式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