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

【vue router传递参数有三种方法 vue】
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、看一下結果
以上便是我现在的共享了,期待可以作用到大伙儿 。