今天就跟大家聊聊有關vue-router中參數(shù)傳遞的方式有哪些，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結了以下內容，希望大家根據(jù)這篇文章可以有所收獲。

秭歸ssl適用于網(wǎng)站、小程序/APP、API接口等需要進行數(shù)據(jù)傳輸應用場景，ssl證書未來市場廣闊！成為創(chuàng)新互聯(lián)的ssl證書銷售渠道，可以享受市場價格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：18980820575（備注：SSL證書合作）期待與您的合作！

vue-router傳遞參數(shù)分為兩大類

• 編程式的導航 router.push

• 聲明式的導航

編程式的導航 router.push

編程式導航傳遞參數(shù)有兩種類型：字符串、對象。

字符串

字符串的方式是直接將路由地址以字符串的方式來跳轉，這種方式很簡單但是不能傳遞參數(shù)：

this.$router.push("home");

對象

想要傳遞參數(shù)主要就是以對象的方式來寫，分為兩種方式：命名路由、查詢參數(shù)，下面分別說明兩種方式的用法和注意事項。

命名路由

命名路由的前提就是在注冊路由的地方需要給路由命名如：

命名路由傳遞參數(shù)需要使用params來傳遞，這里一定要注意使用params不是query。

目標頁面接收傳遞參數(shù)時使用params

特別注意：命名路由這種方式傳遞的參數(shù)，如果在目標頁面刷新是會出錯的

使用方法如下：

this.$router.push({ name: 'news', params: { userId: 123 }})

代碼如下：

接受傳遞的參數(shù)：

運行效果如下：

查詢參數(shù)

查詢參數(shù)其實就是在路由地址后面帶上參數(shù)和傳統(tǒng)的url參數(shù)一致的，傳遞參數(shù)使用query而且必須配合path來傳遞參數(shù)而不能用name，目標頁面接收傳遞的參數(shù)使用query。

注意：和name配對的是params，和path配對的是query

使用方法如下：

this.$router.push({ path: '/news', query: { userId: 123 }});代碼如下：



接收參數(shù)如下：

運行效果如下：

聲明式的導航

聲明式的導航和編程式的一樣，這里就不在過多介紹，給幾個例子大家對照編程式理解，

例子如下：

字符串

click to news page

命名路由

click to news page

運行效果如下：

查詢參數(shù)

click to news page

運行效果如下：

最后總結：

路由傳遞參數(shù)和傳統(tǒng)傳遞參數(shù)是一樣的，命名路由類似表單提交而查詢就是url傳遞，在vue項目中基本上掌握了這兩種傳遞參數(shù)就能應付大部分應用了，最后總結為以下兩點：

1.命名路由搭配params，刷新頁面參數(shù)會丟失

2.查詢參數(shù)搭配query，刷新頁面數(shù)據(jù)不會丟失

3.接受參數(shù)使用this.$router后面就是搭配路由的名稱就能獲取到參數(shù)的值

看完上述內容，你們對vue-router中參數(shù)傳遞的方式有哪些有進一步的了解嗎？如果還想了解更多知識或者相關內容，請關注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝大家的支持。

網(wǎng)站欄目：vue-router中參數(shù)傳遞的方式有哪些-創(chuàng)新互聯(lián)
文章鏈接：http://weahome.cn/article/ccpico.html