欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue路由$router.push()使用query傳參的實(shí)際開發(fā)使用

 更新時(shí)間:2022年11月11日 11:22:16   作者:奶廠小程  
在vue項(xiàng)目中我們用函數(shù)式編程this.$router.push跳轉(zhuǎn),用query傳遞一個(gè)對(duì)象時(shí)要把這個(gè)對(duì)象先轉(zhuǎn)化為字符串,然后在接收的時(shí)候要轉(zhuǎn)化為對(duì)象,下面這篇文章主要給大家介紹了關(guān)于vue路由$router.push()使用query傳參的實(shí)際開發(fā)使用,需要的朋友可以參考下

前言

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

一、vue-router是什么?

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

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

二、router.push()方法

在這里,實(shí)際開發(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更類似于我們平常所說的post請(qǐng)求方式

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

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

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

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

首先,在這個(gè)order.vue的組件中,寫好如下代碼,把這個(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ù)

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

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

代碼如下(示例):

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

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

代碼如下(示例):

  created () {
    if (this.$route.query) {
      this.order = this.$route.query      //通過這個(gè)組件的對(duì)象來接收傳過來的數(shù)據(jù)
      console.log('created this.$route.query', this.order)
      // 將初始化過來的數(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ù)分開傳遞,不要放到對(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方法的使用情況,下一篇可以通過我主頁,查看vue-router組件中的push方法的params傳參方式的實(shí)現(xiàn),以及其他方法《替換當(dāng)前位置router.replace方法》的實(shí)現(xiàn)案例。

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

相關(guān)文章

  • mpvue將vue項(xiàng)目轉(zhuǎn)換為小程序

    mpvue將vue項(xiàng)目轉(zhuǎn)換為小程序

    這篇文章主要介紹了mpvue將vue項(xiàng)目轉(zhuǎn)換為小程序的相關(guān)資料及mpvue開發(fā)流程,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2018-09-09
  • Vue項(xiàng)目中解決數(shù)字精度丟失問題

    Vue項(xiàng)目中解決數(shù)字精度丟失問題

    我們知道,浮點(diǎn)類型的數(shù)據(jù),在計(jì)算機(jī)中是以二進(jìn)制的方式存儲(chǔ)的,但是表示的數(shù)據(jù)也有個(gè)上限和下限,當(dāng)超過限制?,在計(jì)算機(jī)上顯示只能取最接近的限值,?數(shù)字解析精度丟失說的就是這個(gè)現(xiàn)象,所以本文給大家介紹了Vue項(xiàng)目中解決數(shù)字精度丟失問題的解決,需要的朋友可以參考下
    2024-02-02
  • Element Table 自適應(yīng)高度的實(shí)現(xiàn)示例

    Element Table 自適應(yīng)高度的實(shí)現(xiàn)示例

    el-table的高度不能適應(yīng)不同電腦的分辨率,也不能跟隨瀏覽器的高度變化而變化的問題,本文就來解決一下Element Table 自適應(yīng)高度,感興趣的可以了解一下
    2024-07-07
  • 一份超級(jí)詳細(xì)的Vue-cli3.0使用教程【推薦】

    一份超級(jí)詳細(xì)的Vue-cli3.0使用教程【推薦】

    這篇文章主要介紹了一份超級(jí)詳細(xì)的Vue-cli3.0使用教程,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2018-11-11
  • Vue2 監(jiān)聽屬性改變watch的實(shí)例代碼

    Vue2 監(jiān)聽屬性改變watch的實(shí)例代碼

    今天小編就為大家分享一篇Vue2 監(jiān)聽屬性改變watch的實(shí)例代碼,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
    2018-08-08
  • vue watch如何深度監(jiān)聽數(shù)組每一項(xiàng)的變化

    vue watch如何深度監(jiān)聽數(shù)組每一項(xiàng)的變化

    這篇文章主要介紹了vue watch如何深度監(jiān)聽數(shù)組每一項(xiàng)的變化問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2024-07-07
  • 在Vue組件上動(dòng)態(tài)添加和刪除屬性方法

    在Vue組件上動(dòng)態(tài)添加和刪除屬性方法

    下面小編就為大家分享一篇在Vue組件上動(dòng)態(tài)添加和刪除屬性方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
    2018-02-02
  • vue通過點(diǎn)擊事件讀取音頻文件的方法

    vue通過點(diǎn)擊事件讀取音頻文件的方法

    最近做項(xiàng)目遇到這樣的一個(gè)需求,通過select元素來選擇音頻文件的名稱,點(diǎn)擊按鈕可以進(jìn)行試聽。接下來通過本文給大家介紹vue項(xiàng)目中通過點(diǎn)擊事件讀取音頻文件的方法,需要的朋友可以參考下
    2018-05-05
  • vue組件中實(shí)現(xiàn)嵌套子組件案例

    vue組件中實(shí)現(xiàn)嵌套子組件案例

    這篇文章主要介紹了vue組件中實(shí)現(xiàn)嵌套子組件案例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
    2020-08-08
  • vuex的簡單使用教程

    vuex的簡單使用教程

    vuex是一個(gè)專門為vue.js設(shè)計(jì)的集中式狀態(tài)管理架構(gòu)。這篇文章主要介紹了vuex的簡單使用,需要的朋友可以參考下
    2018-02-02

最新評(píng)論