vue如何通過(guò)$router.push傳參數(shù)
如何通過(guò)$router.push傳參數(shù)
下面通過(guò)A頁(yè)面向B頁(yè)面?zhèn)髦祦?lái)舉個(gè)例子:
//A頁(yè)面:? this.$router.push({ ? ? name: '頁(yè)面B', ? ? params: { data: '我是要傳遞的參數(shù)' } }) //B頁(yè)面拿到傳來(lái)的值:? this.data = this.$route.params.data // 拿到上個(gè)頁(yè)面?zhèn)鱽?lái)的數(shù)據(jù)
代碼很簡(jiǎn)單, 一下是需要注意的幾點(diǎn):
1.this.$router.push()方法里的params 可以傳多個(gè)參數(shù), 如:
//A頁(yè)面 this.$router.push({ ? ? name: '頁(yè)面B', ? ? params: { data1: '參數(shù)1', data2: '參數(shù)2'} }) //B頁(yè)面, 拿到傳來(lái)的參數(shù) this.data1 = this.$route.params.data1 this.data2 = this.$route.params.data2
2.this.$router.push()方法除了可以傳遞一般參數(shù)以外, 還能傳遞查詢參數(shù),代碼如下:
this.$router.push({path: '/pagePath', query: {queryData: "2"}});
最終的效果是: /pagePath?queryData=2
this.$router.push傳參及參數(shù)接收
1、兩種方式
方法一:name跳轉(zhuǎn)頁(yè)面
this.$router.push({name:'anotherPage',params:{id:1}});
另一頁(yè)面接收參數(shù)方式:
this.$route.params.id
示例:
控制臺(tái)展示:
方法二:path跳轉(zhuǎn)頁(yè)面
this.$router.push({path:'/anotherPage',query:{id:1}});
另一頁(yè)面接收參數(shù)方式:
this.$route.query.id
2、區(qū)別
1、path的query傳參的參數(shù)會(huì)帶在url后邊展示在地址欄(/anotherPage?id=1),name的params傳參的參數(shù)不會(huì)展示到地址欄。
2、由于動(dòng)態(tài)路由也是傳遞params的,所以在 this.$router.push() 方法中path不能和params一起使用,否則params將無(wú)效,需要用name來(lái)指定頁(yè)面。
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
- vue中的this.$router.push()路由傳值方式
- 關(guān)于Vue3路由push跳轉(zhuǎn)問(wèn)題(解決Vue2this.$router.push失效)
- Vue this.$router.push(參數(shù))實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)操作
- vue.js this.$router.push獲取不到params參數(shù)問(wèn)題
- 解決vue.js this.$router.push無(wú)效的問(wèn)題
- 對(duì)vue2.0中.vue文件頁(yè)面跳轉(zhuǎn)之.$router.push的用法詳解
- Vue中this.$router.push參數(shù)獲取方法
- vue?跳轉(zhuǎn)頁(yè)面$router.resolve和$router.push案例詳解
相關(guān)文章
vue中解決chrome瀏覽器自動(dòng)播放音頻和MP3語(yǔ)音打包到線上的實(shí)現(xiàn)方法
這篇文章主要介紹了vue中解決chrome瀏覽器自動(dòng)播放音頻和MP3語(yǔ)音打包到線上的實(shí)現(xiàn)方法,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-10-10Vuejs使用addEventListener的事件如何觸發(fā)執(zhí)行函數(shù)的this
這篇文章主要介紹了Vuejs使用addEventListener的事件觸發(fā)執(zhí)行函數(shù)的this方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-06-06vue 如何實(shí)現(xiàn)配置@絕對(duì)路徑
這篇文章主要介紹了vue 如何實(shí)現(xiàn)配置@絕對(duì)路徑,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-09-09vue 調(diào)用 RESTful風(fēng)格接口操作
這篇文章主要介紹了vue 調(diào)用 RESTful風(fēng)格接口操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08如何在Vue3中實(shí)現(xiàn)自定義指令(超詳細(xì)!)
除了默認(rèn)設(shè)置的核心指令(v-model和v-show),Vue也允許注冊(cè)自定義指令,下面這篇文章主要給大家介紹了關(guān)于如何在Vue3中實(shí)現(xiàn)自定義指令的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-06-06Ant?Design_Form表單上傳文件組件實(shí)現(xiàn)詳解
這篇文章主要為大家介紹了Ant?Design_Form表單上傳文件組件實(shí)現(xiàn)詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-03-03vue分片上傳視頻并轉(zhuǎn)換為m3u8文件播放的實(shí)現(xiàn)示例
前端上傳大文件、視頻的時(shí)候會(huì)出現(xiàn)超時(shí)、過(guò)大、很慢等情況,為了解決這一問(wèn)題,跟后端配合做了一個(gè)切片的功能,本文主要介紹了vue分片上傳視頻并轉(zhuǎn)換為m3u8文件播放的實(shí)現(xiàn)示例,感興趣的可以了解一下2023-11-11vue3中echarts的tooltip組件不顯示問(wèn)題及解決
這篇文章主要介紹了vue3中echarts的tooltip組件不顯示問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-10-10詳解Vue的鉤子函數(shù)(路由導(dǎo)航守衛(wèi)、keep-alive、生命周期鉤子)
這篇文章主要介紹了詳解Vue的鉤子函數(shù)(路由導(dǎo)航守衛(wèi)、keep-alive、生命周期鉤子),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-07vue中使用file-saver導(dǎo)出文件的全過(guò)程記錄
這篇文章主要給大家介紹了關(guān)于vue中使用file-saver導(dǎo)出文件的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-02-02