vue如何通過$router.push傳參數
更新時間：2022年06月29日 12:02:02 作者：老米的世界
這篇文章主要介紹了vue如何通過$router.push傳參數，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
如何通過$router.push傳參數
下面通過A頁面向B頁面?zhèn)髦祦砼e個例子：
//A頁面:?
this.$router.push({
? ? name: '頁面B',
? ? params: { data: '我是要傳遞的參數' }
})
//B頁面拿到傳來的值:?
this.data = this.$route.params.data // 拿到上個頁面?zhèn)鱽淼臄祿?/pre>代碼很簡單, 一下是需要注意的幾點：
1.this.$router.push()方法里的params 可以傳多個參數, 如:
//A頁面
this.$router.push({
? ? name: '頁面B',
? ? params: { data1: '參數1', data2: '參數2'}
})
//B頁面, 拿到傳來的參數
this.data1 = this.$route.params.data1
this.data2 = this.$route.params.data22.this.$router.push()方法除了可以傳遞一般參數以外, 還能傳遞查詢參數,代碼如下:
this.$router.push({path: '/pagePath', query: {queryData: "2"}});最終的效果是: /pagePath?queryData=2
this.$router.push傳參及參數接收
1、兩種方式
方法一：name跳轉頁面
this.$router.push({name:'anotherPage',params:{id:1}});另一頁面接收參數方式：
this.$route.params.id
示例：
控制臺展示：
方法二：path跳轉頁面
this.$router.push({path:'/anotherPage',query:{id:1}});另一頁面接收參數方式：
this.$route.query.id
2、區(qū)別
1、path的query傳參的參數會帶在url后邊展示在地址欄(/anotherPage?id=1)，name的params傳參的參數不會展示到地址欄。
2、由于動態(tài)路由也是傳遞params的，所以在 this.$router.push() 方法中path不能和params一起使用，否則params將無效，需要用name來指定頁面。
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關文章
本文主要介紹了Vue保持用戶登錄狀態(tài)(各種token存儲方式)，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
Vue+Element ui 根據后臺返回數據設置動態(tài)表頭操作
這篇文章主要介紹了Vue+Element ui 根據后臺返回數據設置動態(tài)表頭操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
淺析vue 函數配置項watch及函數 $watch 源碼分享
這篇文章主要介紹了vue 函數配置項watch及函數 $watch 源碼分享 ,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-11-11
這篇文章主要介紹了Vue組件間數據傳遞的方式，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-07-07
這篇文章主要介紹了vant中的toast層級改變操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要為大家詳細介紹了Vue實現天氣預報功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
Electron?store及shareObject進程間數據交互存儲功能封裝
這篇文章主要為大家介紹了Electron?store及shareObject進程間數據交互存儲功能封裝示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
這篇文章主要介紹了vue3?封裝自定義組件v-model及自定義組件使用v-model，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-07-07
這篇文章主要介紹了用vue3寫了一個Json-Preview的相關知識,引入后直接<json-preview?v-model="jsonData"></json-preview>就可以使用了，本文通過示例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2022-06-06
Vue3中provide和inject作用和場景是頂層組件向任意的底層組件傳遞數據和方法,實現跨層組件通信,本文通過實例介紹Vue3 provide和inject的相關知識,感興趣的朋友一起看看吧2023-11-11