vue界面间跳转传参问题(一)
方法:使用query方法进行传参
代码详情
下面展示的发送参数的vue组件 代码
。
//发送参数
<el-button type="primary" size="medium" icon="el-icon-plus" @click="add">进行传参</el-button>
//传参方法
add() {
this.$router.push({
path: '/ad/order/add' ,
query: {params: JSON.stringify({id: 1, name: 'xiaoming'})}
})
},
下面展示的接收参数的vue组件 代码
。
//接收参数
// 加载方法
methods:{
showParams(){
this.params = JSON.parse(this.$route.query.params) // 获取从router中传过来的参数
console.log('数据是:' , this.params)
},
//进入页面的时候执行
created() {
this.showParams();
}
方法分析
该方法,方便快捷,传参效率高,并且不存在刷新丢失参数的情况。当然也存在一个小小的瑕疵:在传参的时候,其参数会在地址栏中显示,如果参数含有敏感数据,则不宜采用此种方法。后面将继续更新其他传参方法。