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)換為小程序的相關(guān)資料及mpvue開發(fā)流程,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-09-09Element 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使用教程,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-11-11Vue2 監(jiān)聽屬性改變watch的實(shí)例代碼
今天小編就為大家分享一篇Vue2 監(jiān)聽屬性改變watch的實(shí)例代碼,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08vue watch如何深度監(jiān)聽數(shù)組每一項(xiàng)的變化
這篇文章主要介紹了vue watch如何深度監(jiān)聽數(shù)組每一項(xiàng)的變化問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07