Vue入坑——vue-router如何传递参数

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

一起学vue——vue学习总路线

——————————^~^我是萌萌哒分割线^~^————————————————

前言

在上一篇里我们清楚了怎么样创建子路由,本篇来看看路由之间怎样传递参数。

平时,我们在开发过程中,传递参数可以通过url后面接参数,也可以通过post请求传递。在vue路由中,也有他自己的传递方式。

传递参数

(1)、使用name传递

之前一直在配置路由的时候出现一个name,但不知道他具体有什么用,在路由里他可以用来传递参数。我们来看看怎么使用:

在index.js中将路由的name都写好

102357_Mdtg_3802541.png

接收参数:

在我们需要接收他的页面里添加

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

102709_1ONx_3802541.png

比如我在这里是在App.vue中接收的,我希望切换每个页面都能看见参数。

看看结果:

102731_x8GS_3802541.png

102758_gTmw_3802541.png

但这种方法不太常用,因为我们觉得他不太规整。别着急,还有其他的方法

(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相对应

104639_xsd2_3802541.png

c、在hellovue.vue中接收参数

  <p>传递的名字是:{{$route.params.username}}</p>

看看结果:

105526_pLrT_3802541.png

(3)、采用url传参

在路由文件里采用冒号的形式传参,这就是对参数的绑定

a、修改index.js里的path,这里我们修改myjob.vue组件

111832_b4Wa_3802541.png

b、在App.vue组件里传递参数

111945_ARNJ_3802541.png

c、在myjob.vue组件里显示我们要展示的内容(接收参数)

111912_BAv3_3802541.png
d、看看结果

112104_9v1P_3802541.png

结语

这就是三种传参方式啦,第一种使用name的方式不太常用,后面的还是比较常用的。加油!

——————————^~^我是萌萌哒分割线^~^————————————————

                                                                                                    下一篇:vue-router单页面多路由配置

转载于:https://my.oschina.net/u/3802541/blog/1810670

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值