vue（vue router传递参数有三种方法）

vue router如何传参呢？不清楚的小伙伴们来看看我现在的分享吧!

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、看一下結果

以上便是我现在的共享了，期待可以作用到大伙儿。

- END -