亲宝软件园·资讯

展开

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

奶厂小程 人气: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方法》的实现案例。

加载全部内容

相关教程
猜你喜欢
用户评论