vue界面间跳转传参问题（一）

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(); 
    }

方法分析

该方法，方便快捷，传参效率高，并且不存在刷新丢失参数的情况。当然也存在一个小小的瑕疵：在传参的时候，其参数会在地址栏中显示，如果参数含有敏感数据，则不宜采用此种方法。后面将继续更新其他传参方法。