扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
这篇文章主要为大家展示了“vue如何传参”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“vue如何传参”这篇文章吧。
专注于为中小企业提供成都做网站、成都网站设计服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业东方免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了1000多家企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。
vue传参的三种方式：1、利用路由的name属性来传参，通过“$route.name”来接收参数；2、通过router-link中的to属性来传参；3、使用path来匹配路由组件，采用url来传参。
本教程操作环境：windows7系统、vue2.9.6版，DELL G3电脑。
第一种：使用name传递
之前一直在配置路由的时候出现一个name,但不知道他具体有什么用，在路由里他可以用来传递参数。在index.js中将路由的name都写好
接收参数：
在我们需要接收它的页面里添加
我是router-name:{{$route.name}}
比如我在这里是在APP.vue中接收的，我希望切换每个页面都能看见参数。
看结果：
但这种方法不太常用，因为我们觉得它不太规整。
第二种：通过router-link中的to属性
利用router-link 中的to来传参，看语法：
a.首先：to需要绑定；
b.传参使用类似与对象的形式；
c.name就是我们在配置路由时候取的名字；
d.参数也是采用对象的形式。
实际操作一下：
a.在APP.vue中将to里面的路径改成上面那样