這篇文章主要為大家展示了“vue如何傳參”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“vue如何傳參”這篇文章吧。

專注于為中小企業(yè)提供成都做網(wǎng)站、成都網(wǎng)站設(shè)計服務(wù),電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業(yè)東方免費做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了1000多家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實現(xiàn)規(guī)模擴充和轉(zhuǎn)變。

vue傳參的三種方式：1、利用路由的name屬性來傳參，通過“$route.name”來接收參數(shù)；2、通過router-link中的to屬性來傳參；3、使用path來匹配路由組件，采用url來傳參。

本教程操作環(huán)境：windows7系統(tǒng)、vue2.9.6版，DELL G3電腦。

第一種：使用name傳遞

之前一直在配置路由的時候出現(xiàn)一個name,但不知道他具體有什么用，在路由里他可以用來傳遞參數(shù)。在index.js中將路由的name都寫好

接收參數(shù)：

在我們需要接收它的頁面里添加

<p>我是router-name:{{$route.name}}</p>

比如我在這里是在APP.vue中接收的，我希望切換每個頁面都能看見參數(shù)。

看結(jié)果：

但這種方法不太常用，因為我們覺得它不太規(guī)整。

第二種：通過router-link中的to屬性

利用router-link 中的to來傳參，看語法：

<router-link v-bind:to="{name:'xxx',params:{key:value}}"></router-link>

a.首先：to需要綁定；

b.傳參使用類似與對象的形式；

c.name就是我們在配置路由時候取的名字；

d.參數(shù)也是采用對象的形式。

實際操作一下：

a.在APP.vue中將to里面的路徑改成上面那樣

<router-link :to="{name:'hellovue',params:{username:'tomcat'}}">hellovue頁面</router-link>

這里我們注意to的寫法，前面加了冒號，因為那是綁定的，傳遞一個username過去，值為tomcat

b.在index.js里面給hellovue配置名字叫hellovue,與上面name相對應(yīng)

c、在hellovue.vue中接收參數(shù)

 <p>傳遞的名字是：{{$route.params.username}}</p>

看看結(jié)果：

第三種：使用path來匹配路由組件，采用url傳參

在路由文件里采用冒號的形式傳參，這就是對參數(shù)的綁定

a、修改index.js里的path，這里我們修改myjob.vue組件

b、在App.vue組件里傳遞參數(shù)

c、在myjob.vue組件里顯示我們要展示的內(nèi)容（接收參數(shù)）

d、看看結(jié)果

以上是“vue如何傳參”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

分享標題：vue如何傳參
本文來源：http://www.rwnh.cn/article14/jiedde.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供電子商務(wù)、手機網(wǎng)站建設(shè)、做網(wǎng)站、小程序開發(fā)、外貿(mào)建站、

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)