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

前言

最近，在开发前端中，涉及到了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方法》的实现案例。

到此这篇关于vue路由$router.push()使用query传参的实际开发使用的文章就介绍到这了,更多相关vue路由$router.push()用query传参内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论