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

vue如何通過$router.push傳參數(shù)

 更新時間：2022年06月29日 12:02:02   作者：老米的世界  
這篇文章主要介紹了vue如何通過$router.push傳參數(shù)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

如何通過$router.push傳參數(shù)

下面通過A頁面向B頁面?zhèn)髦祦砼e個例子：

//A頁面:?
this.$router.push({
? ? name: '頁面B',
? ? params: { data: '我是要傳遞的參數(shù)' }
})
//B頁面拿到傳來的值:?
this.data = this.$route.params.data // 拿到上個頁面?zhèn)鱽淼臄?shù)據(jù)

代碼很簡單, 一下是需要注意的幾點：

1.this.$router.push()方法里的params 可以傳多個參數(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.data2

2.this.$router.push()方法除了可以傳遞一般參數(shù)以外, 還能傳遞查詢參數(shù),代碼如下:

this.$router.push({path: '/pagePath', query: {queryData: "2"}});

最終的效果是: /pagePath?queryData=2

this.$router.push傳參及參數(shù)接收

1、兩種方式

方法一：name跳轉頁面

this.$router.push({name:'anotherPage',params:{id:1}});

另一頁面接收參數(shù)方式：

this.$route.params.id

示例：

控制臺展示：

方法二：path跳轉頁面

this.$router.push({path:'/anotherPage',query:{id:1}});

另一頁面接收參數(shù)方式：

this.$route.query.id

2、區(qū)別

1、path的query傳參的參數(shù)會帶在url后邊展示在地址欄(/anotherPage?id=1)，name的params傳參的參數(shù)不會展示到地址欄。

2、由于動態(tài)路由也是傳遞params的，所以在 this.$router.push() 方法中path不能和params一起使用，否則params將無效，需要用name來指定頁面。

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

相關文章

最新評論