vue如何通過$router.push傳參數

Posted on by

如何通過$router.push傳參數

下面通過A頁面向B頁面傳值來舉個例子：

//A頁面: 
this.$router.push({
    name: '頁面B',
    params: { data: '我是要傳遞的參數' }
})
//B頁面拿到傳來的值: 
this.data = this.$route.params.data // 拿到上個頁面傳來的數據

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

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.data2

2.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、區別

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

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

以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。

推薦閱讀：