Vue路由傳參的3種形式

2021-09-27 13:03:32 字數 1454 閱讀 1575

在列表向詳情頁面跳轉，而後在詳情頁面檢視列表的詳情資訊，此時設計路由傳參，vue中有3種傳參形式，介紹如下：

class


="action-btn"


@click


="viewdetails(item.id)"


>


>


一、path形式


methods：`,})}
此方法，會將引數直接拼接在url上面，需要在路由檔案中配置動態路由，具體的配置如下：

另外，在詳情頁面orderdetails.vue中可以通過 this.$route.params.id 來獲取傳遞的引數，具體如下：

created()
優點：頁面重新整理不會產生資料丟失的問題。

二、name + params形式

methods：})


}
此方法，不會將引數直接拼接在url上面，在路由配置的時候，不需要使用動態路由配置，具體如下：

另外，在詳情頁面orderdetails.vue中可以通過 this.$route.params.id 來獲取傳遞的引數，具體如下：

created()
缺點：頁面重新整理會產生資料丟失的問題。

三、path + query形式

methods：})


}
此方法，會將引數拼接到url上面，並且使用 key=value 的形式，對應的路由不需要配置成動態路由，具體如下：

另外，在詳情頁面 orderdetails.vue 中可以通過 this.$route.query.id 來獲取傳遞的引數，具體如下：

created()
四、總結對比

形式路由

特點引數獲取

urlname + params

非動態路由

不可重新整理this.$route.params.id

/orderdetails

path

動態路由可重新整理

this.$route.params.id

/orderdetails/1

path + query

非動態路由

可重新整理this.$route.query.id/orderdetails?id=1

掃碼：

Vue路由傳參的3種形式

在列表向詳情頁面跳轉，而後在詳情頁面檢視列表的詳情資訊，此時設計路由傳參，vue中有3種傳參形式，介紹如下 methods 此方法，會將引數直接拼接在url上面，需要在路由檔案中配置動態路由，具體的配置如下 另外，在詳情頁面orderdetails.vue中可以通過 this.route.param...

VUE路由傳參有3種方式

vue路由傳參有3種方式 1 query方式 push時使用path來匹配 發起頁面 this.katex parse error expected got eof at end of input eturn 跳轉轉收頁面的時候,位址列會顯示 2 params模式 push時使用name來匹配 發起...

vue的路由傳參的3種方式

push 有兩種方式 一種是通過path，一種是通過name。然後無論是path還是name都有params和query方式進行傳遞，如下 type 居住類 this.router.push this.router.push this.router.push this.router.push 到這裡...