vue路由$router.push()使用query传参的实际开发使用

时间:2022-11-12 奶厂小程人气:0

前言

最近，在开发前端中，涉及到了vue的传参问题，在这里做了一下笔记，好好总结一下

一、vue-router是什么？

首先，我们先要了解到vue-router,它是官方的一个前端路由插件，适合用于构建单页面应用。

对于vue-router，它是由路由和组件组成关联的，路由可以设定用户要访问的路径，然后通过将路径和组件捆绑映射起来。最后，在单页面应用中，随着页面的路径的变化，那就代表着组件的变化。

二、router.push()方法

在这里，实际开发中就使用到这个push()方法，这个方法有什么作用呢，首先，先看这个push的字面意思，它翻译成中文就是推动，所以，很明显，它就是推送嘛，在实际应用中，就是导航到不同的位置中去，就是当你想要导航到不同的url中，可以使用这个push方法，它会向history栈添加一个新的记录。

三、vue-router传递的参数

它传递参数主要有俩种，分别是params和query；

我们这，主要使用到的是query,

首先，这俩者之间:

一是url不同

如：query在url中显示参数，？后面就是，http://localhost:8082/delivery_trace_record?type=1;params在url中不显示参数,http://localhost:8082/delivery_trace_record

二是使用方式不一样

params需要与name结合，params更类似于我们平常所说的post请求方式

query需要与path结合，query更类似于我们平常所说的get请求方式

四.实际开发使用

1.query传参使用案例（数据传递）

1.发送数据

首先，在这个order.vue的组件中，写好如下代码，把这个组件的参数req，然后导航到下一个组件中去

代码如下（示例）：

      const req = {    // 参数构建
        orderNo: item.orderNo,
        clientNo: item.clientNo,
        vbeln: item.vbeln,
        posnr: item.posnr,
        price: item.price,
        qty : item.qty,
        totalAmt:item.totalAmt
      }
      console.log('toOrder req', req)
      this.$router.push({              // 推送方法
        path: '/order_trace_record',   //导航的路径
        query: req      // 请求参数在这
      })

2.读入数据

然后来到了这个组件orderTraceRecord中，通过了生命周期钩子函数created()来初始化数据，来接收前面过来的数据，

第一步，先创建个接收对象

代码如下（示例）：

  data () {
    return {
      order: {
        vbeln: null,
        orderNo: null,
        clientNo: null,
        price:null,
        qty:null,
        totalAmt:item.totalAmt
      },
      scansNoList: []
      }
     }

然后呢，通过这个this.order来接收数据this.$route.query;然后再通过这个this.order来进行其他的数据的处理即可。

代码如下（示例）：

  created () {
    if (this.$route.query) {
      this.order = this.$route.query      //通过这个组件的对象来接收传过来的数据
      console.log('created this.$route.query', this.order)
      // 将初始化过来的数组进行处理
      this.scansNoList = this.order.scanList.concat()
}

补充：this.$router.push用query传参对象时需注意的地方

在vue项目中，我们用函数式编程this.$router.push跳转，用query传递一个对象时要把这个对象先转化为字符串，然后在接收的时候要转化为对象，要不然会接收不到参数。要不就把参数分开传递，不要放到对象里。

this.$router.push({
    path: '/liveing',
    query: {
        routeParams: JSON.stringify({ liveUrl: url, flag: 2 })
    }
});

接收：

let routeParams = JSON.parse(this.$route.query.routeParams)
this.currMeetingUrl = routeParams.liveUrl; 
this.obcject = routeParams.flag;

第二种方法：不要套在对象里直接传递

this.$router.push({
    path: '/liveing',
    query: {
        liveUrl: url, 
        flag: 2
    }
});

接受：

let liveUrl = this.$route.query.liveUrl;
let flag = this.$route.query.flag;

总结

本博文主要记录一下vue-router组件中的push方法的使用情况，下一篇可以通过我主页，查看vue-router组件中的push方法的params传参方式的实现，以及其他方法《替换当前位置router.replace方法》的实现案例。

加载全部内容