vue如何通過$router.push傳參數(shù)
如何通過$router.push傳參數(shù)
下面通過A頁面向B頁面?zhèn)髦祦砼e個(gè)例子：
//A頁面:?
this.$router.push({
? ? name: '頁面B',
? ? params: { data: '我是要傳遞的參數(shù)' }
})
//B頁面拿到傳來的值:?
this.data = this.$route.params.data // 拿到上個(gè)頁面?zhèn)鱽淼臄?shù)據(jù)代碼很簡單, 一下是需要注意的幾點(diǎn)：
1.this.$router.push()方法里的params 可以傳多個(gè)參數(shù), 如:
//A頁面
this.$router.push({
? ? name: '頁面B',
? ? params: { data1: '參數(shù)1', data2: '參數(shù)2'}
})
//B頁面, 拿到傳來的參數(shù)
this.data1 = this.$route.params.data1
this.data2 = this.$route.params.data22.this.$router.push()方法除了可以傳遞一般參數(shù)以外, 還能傳遞查詢參數(shù),代碼如下:
this.$router.push({path: '/pagePath', query: {queryData: "2"}});最終的效果是: /pagePath?queryData=2
this.$router.push傳參及參數(shù)接收
1、兩種方式
方法一：name跳轉(zhuǎn)頁面
this.$router.push({name:'anotherPage',params:{id:1}});另一頁面接收參數(shù)方式：
this.$route.params.id
示例：
控制臺(tái)展示：
方法二：path跳轉(zhuǎn)頁面
this.$router.push({path:'/anotherPage',query:{id:1}});另一頁面接收參數(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將無效，需要用name來指定頁面。
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
- vue之this.$router.push頁面刷新問題
- vue?跳轉(zhuǎn)頁面$router.resolve和$router.push案例詳解
- vue中的this.$router.push()路由傳值方式
- Vue中$router.push()路由切換及如何傳參和獲取參數(shù)
- vue中this.$router.push()路由傳值和獲取的兩種常見方法匯總
- Vue this.$router.push(參數(shù))實(shí)現(xiàn)頁面跳轉(zhuǎn)操作
- vue兩組件間值傳遞 $router.push實(shí)現(xiàn)方法
- 對(duì)vue2.0中.vue文件頁面跳轉(zhuǎn)之.$router.push的用法詳解
- Vue $router.push打開新窗口的實(shí)現(xiàn)方法
相關(guān)文章
Vue保持用戶登錄狀態(tài)(各種token存儲(chǔ)方式)
本文主要介紹了Vue保持用戶登錄狀態(tài)(各種token存儲(chǔ)方式)，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
Vue+Element ui 根據(jù)后臺(tái)返回?cái)?shù)據(jù)設(shè)置動(dòng)態(tài)表頭操作
這篇文章主要介紹了Vue+Element ui 根據(jù)后臺(tái)返回?cái)?shù)據(jù)設(shè)置動(dòng)態(tài)表頭操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-09-09
淺析vue 函數(shù)配置項(xiàng)watch及函數(shù) $watch 源碼分享
這篇文章主要介紹了vue 函數(shù)配置項(xiàng)watch及函數(shù) $watch 源碼分享 ,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-11-11
這篇文章主要介紹了Vue組件間數(shù)據(jù)傳遞的方式，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
這篇文章主要介紹了vant中的toast層級(jí)改變操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11
Vue實(shí)現(xiàn)天氣預(yù)報(bào)功能
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)天氣預(yù)報(bào)功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
Electron?store及shareObject進(jìn)程間數(shù)據(jù)交互存儲(chǔ)功能封裝
這篇文章主要為大家介紹了Electron?store及shareObject進(jìn)程間數(shù)據(jù)交互存儲(chǔ)功能封裝示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
這篇文章主要介紹了vue3?封裝自定義組件v-model及自定義組件使用v-model，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-07-07
這篇文章主要介紹了用vue3寫了一個(gè)Json-Preview的相關(guān)知識(shí),引入后直接<json-preview?v-model="jsonData"></json-preview>就可以使用了，本文通過示例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-06-06
Vue3中provide和inject作用和場(chǎng)景
Vue3中provide和inject作用和場(chǎng)景是頂層組件向任意的底層組件傳遞數(shù)據(jù)和方法,實(shí)現(xiàn)跨層組件通信,本文通過實(shí)例介紹Vue3 provide和inject的相關(guān)知識(shí),感興趣的朋友一起看看吧2023-11-11