大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
这篇文章主要介绍vue中如何使用params、query传参,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
10余年的南木林网站建设经验,针对设计、前端、开发、售后、文案、推广等六对一服务,响应快,48小时及时工作处理。营销型网站建设的优势是能够根据用户设备显示端的尺寸不同,自动调整南木林建站的显示方式,使网站能够适用不同显示终端,在浏览器中调整网站的宽度,无论在任何一种浏览器上浏览网站,都能展现优雅布局与设计,从而大程度地提升浏览体验。成都创新互联公司从事“南木林网站设计”,“南木林网站推广”以来,每个客户项目都认真落实执行。
声明式:
编程式:router.push(...)
这两种方式 都可以实现跳转链接,在上篇文章继续,通过A组件跳转链接到B组件并且传参数。
1、router.push使用
router/index.js
export default new Router({ routes: [ { path: '/', name: 'A', component: require('../components/A') }, { path: '/B/:name/:age', name: 'B', component: require('../components/B') } ] })
上边,在路由中为B组件添加两个参数 name ,age
A组件,绑定一个@click事件,跳转B组件传参 使用params
{{message}}
跳转B组件啊啊
这时浏览器会显示 :http://localhost:8080/#/B/xy/22
在看下query 传值及地址变化
同样在 router/index.js路由文件中 不变有两个参数name,age
{ path: '/B/:name/:age', name: 'B', component: require('../components/B') }
在A组件中,之前参数传递是通过params,
this.$router.push({name:'B',params:{name:'xy',age:22}});
替换后,query
this.$router.push({name:'B',query:{name:'xy',age:22}});
这时浏览器会发现:http://localhost:8080/#/?name=xy&age=22
通过以上两种,页面刷新后,参数还会保留的。
获取值有些不相同:
params:this.$route.params.name;
query:this.$route.query.name;
------------------------ 还有种方式--------------------------------------------
使用 router-link
跳转B组件
跳转后,浏览器地址为:http://localhost:8080/#/B?name=zzz&age=22
跟 this.$router.push(...) 是一样的
跳转B组件
{ path: '/B/:name', name: 'B', component: require('../components/B') }
取值
this.$route.params.name
以上是“vue中如何使用params、query传参”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!