网站建设资讯

NEWS

网站建设资讯

vue如何传参

这篇文章主要为大家展示了“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都写好

vue如何传参

接收参数:

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

我是router-name:{{$route.name}}

vue如何传参

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

看结果:

vue如何传参

vue如何传参

但这种方法不太常用,因为我们觉得它不太规整。

第二种:通过router-link中的to属性

利用router-link 中的to来传参,看语法:

a.首先:to需要绑定;

b.传参使用类似与对象的形式;

c.name就是我们在配置路由时候取的名字;

d.参数也是采用对象的形式。

实际操作一下:

a.在APP.vue中将to里面的路径改成上面那样

hellovue页面

这里我们注意to的写法,前面加了冒号,因为那是绑定的,传递一个username过去,值为tomcat

b.在index.js里面给hellovue配置名字叫hellovue,与上面name相对应

vue如何传参

c、在hellovue.vue中接收参数

 

传递的名字是:{{$route.params.username}}

看看结果:

vue如何传参

第三种:使用path来匹配路由组件,采用url传参

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

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

vue如何传参

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

vue如何传参

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

vue如何传参

d、看看结果

vue如何传参

以上是“vue如何传参”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!


网站栏目:vue如何传参
转载注明:http://cdweb.net/article/jiedde.html