前言

最近，在開(kāi)發(fā)前端中，涉及到了vue的傳參問(wèn)題，在這里做了一下筆記，好好總結(jié)一下

一、vue-router是什么？

首先，我們先要了解到vue-router,它是官方的一個(gè)前端路由插件，適合用于構(gòu)建單頁(yè)面應(yīng)用。

對(duì)于vue-router，它是由路由和組件組成關(guān)聯(lián)的，路由可以設(shè)定用戶要訪問(wèn)的路徑，然后通過(guò)將路徑和組件捆綁映射起來(lái)。最后，在單頁(yè)面應(yīng)用中，隨著頁(yè)面的路徑的變化，那就代表著組件的變化。

二、router.push()方法

在這里，實(shí)際開(kāi)發(fā)中就使用到這個(gè)push()方法，這個(gè)方法有什么作用呢，首先，先看這個(gè)push的字面意思，它翻譯成中文就是推動(dòng)，所以，很明顯，它就是推送嘛，在實(shí)際應(yīng)用中，就是導(dǎo)航到不同的位置中去，就是當(dāng)你想要導(dǎo)航到不同的url中，可以使用這個(gè)push方法，它會(huì)向history棧添加一個(gè)新的記錄。

三、vue-router傳遞的參數(shù)

它傳遞參數(shù)主要有倆種，分別是params和query；

我們這，主要使用到的是query,

首先，這倆者之間:

一是url不同

如：query在url中顯示參數(shù)，？后面就是，http://localhost:8082/delivery_trace_record?type=1;params在url中不顯示參數(shù),http://localhost:8082/delivery_trace_record

二是使用方式不一樣

params需要與name結(jié)合，params更類(lèi)似于我們平常所說(shuō)的post請(qǐng)求方式

query需要與path結(jié)合，query更類(lèi)似于我們平常所說(shuō)的get請(qǐng)求方式

四.實(shí)際開(kāi)發(fā)使用

1.query傳參使用案例（數(shù)據(jù)傳遞）

1.發(fā)送數(shù)據(jù)

首先，在這個(gè)order.vue的組件中，寫(xiě)好如下代碼，把這個(gè)組件的參數(shù)req，然后導(dǎo)航到下一個(gè)組件中去

代碼如下（示例）：

      const req = {    // 參數(shù)構(gòu)建
        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',   //導(dǎo)航的路徑
        query: req      // 請(qǐng)求參數(shù)在這
      })

2.讀入數(shù)據(jù)

然后來(lái)到了這個(gè)組件orderTraceRecord中，通過(guò)了生命周期鉤子函數(shù)created()來(lái)初始化數(shù)據(jù)，來(lái)接收前面過(guò)來(lái)的數(shù)據(jù)，

第一步，先創(chuàng)建個(gè)接收對(duì)象

代碼如下（示例）：

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

然后呢，通過(guò)這個(gè)this.order來(lái)接收數(shù)據(jù)this.$route.query;然后再通過(guò)這個(gè)this.order來(lái)進(jìn)行其他的數(shù)據(jù)的處理即可。

代碼如下（示例）：

  created () {
    if (this.$route.query) {
      this.order = this.$route.query      //通過(guò)這個(gè)組件的對(duì)象來(lái)接收傳過(guò)來(lái)的數(shù)據(jù)
      console.log('created this.$route.query', this.order)
      // 將初始化過(guò)來(lái)的數(shù)組進(jìn)行處理
      this.scansNoList = this.order.scanList.concat()
}

補(bǔ)充：this.$router.push用query傳參對(duì)象時(shí)需注意的地方

在vue項(xiàng)目中，我們用函數(shù)式編程this.$router.push跳轉(zhuǎn)，用query傳遞一個(gè)對(duì)象時(shí)要把這個(gè)對(duì)象先轉(zhuǎn)化為字符串，然后在接收的時(shí)候要轉(zhuǎn)化為對(duì)象，要不然會(huì)接收不到參數(shù)。要不就把參數(shù)分開(kāi)傳遞，不要放到對(duì)象里。

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;

第二種方法：不要套在對(duì)象里直接傳遞

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

接受：

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

總結(jié)

 本博文主要記錄一下vue-router組件中的push方法的使用情況，下一篇可以通過(guò)我主頁(yè)，查看vue-router組件中的push方法的params傳參方式的實(shí)現(xiàn)，以及其他方法《替換當(dāng)前位置router.replace方法》的實(shí)現(xiàn)案例。

到此這篇關(guān)于vue路由$router.push()使用query傳參的實(shí)際開(kāi)發(fā)使用的文章就介紹到這了,更多相關(guān)vue路由$router.push()用query傳參內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論