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

成都創(chuàng)新互聯(lián)一直通過(guò)網(wǎng)站建設(shè)和網(wǎng)站營(yíng)銷(xiāo)幫助企業(yè)獲得更多客戶(hù)資源。 以"深度挖掘，量身打造，注重實(shí)效"的一站式服務(wù)，以做網(wǎng)站、成都網(wǎng)站建設(shè)、移動(dòng)互聯(lián)產(chǎn)品、全網(wǎng)整合營(yíng)銷(xiāo)推廣服務(wù)為核心業(yè)務(wù)。10多年網(wǎng)站制作的經(jīng)驗(yàn)，使用新網(wǎng)站建設(shè)技術(shù)，全新開(kāi)發(fā)出的標(biāo)準(zhǔn)網(wǎng)站，不但價(jià)格便宜而且實(shí)用、靈活，特別適合中小公司網(wǎng)站制作。網(wǎng)站管理系統(tǒng)簡(jiǎn)單易用，維護(hù)方便，您可以完全操作網(wǎng)站資料，是中小公司快速網(wǎng)站建設(shè)的選擇。

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

• 編程式的導(dǎo)航 router.push

• 聲明式的導(dǎo)航

編程式的導(dǎo)航 router.push

編程式導(dǎo)航傳遞參數(shù)有兩種類(lèi)型：字符串、對(duì)象。

字符串

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

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

對(duì)象

想要傳遞參數(shù)主要就是以對(duì)象的方式來(lái)寫(xiě)，分為兩種方式：命名路由、查詢(xún)參數(shù)，下面分別說(shuō)明兩種方式的用法和注意事項(xiàng)。

命名路由

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

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

目標(biāo)頁(yè)面接收傳遞參數(shù)時(shí)使用params

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

使用方法如下：

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

代碼如下：

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

運(yùn)行效果如下：

查詢(xún)參數(shù)

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

注意：和name配對(duì)的是params，和path配對(duì)的是query

使用方法如下：

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



接收參數(shù)如下：

運(yùn)行效果如下：

聲明式的導(dǎo)航

聲明式的導(dǎo)航和編程式的一樣，這里就不在過(guò)多介紹，給幾個(gè)例子大家對(duì)照編程式理解，

例子如下：

字符串

click to news page

命名路由

click to news page

運(yùn)行效果如下：

查詢(xún)參數(shù)

click to news page

運(yùn)行效果如下：

最后總結(jié)：

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

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

2.查詢(xún)參數(shù)搭配query，刷新頁(yè)面數(shù)據(jù)不會(huì)丟失

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

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