router傳參 vue

vue router傳遞引數有三種方法：
方法一：使用name傳遞

接收引數：

在我們需要接收它的頁面裡新增

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

比如在這裡是在APP.vue中接收的，希望切換每個頁面都能看見引數。

看結果：

方法二：用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>

看看結果：

方法三：採用url傳參

在路由檔案裡採用冒號的形式傳參，這就是對引數的繫結

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

b、在App.vue元件裡傳遞引數

c、在myjob.vue元件裡顯示我們要展示的內容（接收引數）

d、看看結果