Vue入坑——vue-router如何傳遞參數

上一篇：vue-router配置子路由

一塊兒學vue——vue學習總路線

——————————^~^我是萌萌噠分割線^~^————————————————

前言

在上一篇裏咱們清楚了怎麼樣建立子路由，本篇來看看路由之間怎樣傳遞參數。

平時，咱們在開發過程當中，傳遞參數能夠經過url後面接參數，也能夠經過post請求傳遞。在vue路由中，也有他本身的傳遞方式。

傳遞參數

（1）、使用name傳遞

以前一直在配置路由的時候出現一個name，但不知道他具體有什麼用，在路由裏他能夠用來傳遞參數。咱們來看看怎麼使用：

在index.js中將路由的name都寫好

接收參數：

在咱們須要接收他的頁面裏添加

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

好比我在這裏是在App.vue中接收的，我但願切換每一個頁面都能看見參數。

看看結果：

但這種方法不太經常使用，由於咱們以爲他不太規整。彆着急，還有其餘的方法

（2）、to來傳遞

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

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

a、首先：to須要綁定

b、傳參使用相似於對象的形式

c、name就是咱們在配置路由時候取的名字

d、參數也是採用對象的形式

來實際操做一下：

a、在App.vue中將to裏的路徑修改爲上面那樣

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

這裏咱們注意to的寫法，前面加了冒號，由於那是綁定的，傳一個username過去，值爲tomcat

b、在index.js裏面給hellovue配置名字叫hellovue，與上面name相對應

c、在hellovue.vue中接收參數

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

看看結果：

（3）、採用url傳參

在路由文件裏採用冒號的形式傳參，這就是對參數的綁定

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

b、在App.vue組件裏傳遞參數

c、在myjob.vue組件裏顯示咱們要展現的內容（接收參數）

d、看看結果

結語

這就是三種傳參方式啦，第一種使用name的方式不太經常使用，後面的仍是比較經常使用的。加油！

——————————^~^我是萌萌噠分割線^~^————————————————

                                                                                                    下一篇：vue-router單頁面多路由配置