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

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

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

如何通過(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è)參考，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論