使用vue-router进行传参时需要注意哪些事项
使用vue-router进行传参时需要注意哪些事项?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。
成都创新互联专业成都网站制作、做网站、外贸营销网站建设,集网站策划、网站设计、网站制作于一体,网站seo、网站优化、网站营销、软文营销等专业人才根据搜索规律编程设计,让网站在运行后,在搜索中有好的表现,专业设计制作为您带来效益的网站!让网站建设为您创造效益。
1. 使用name和params组合传参
this.$router.push({name: 'details', params: {'id': 233}})
路由配置
import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) export default new Router({ mode: 'history', routes: [ { path: '/details', name: 'details', component: resolve => require(['../components/details'], resolve) } ] })
获取参数
this.$route.params.id // 233
刷新参数丢失 显示 undefined
this.$route.params.id // undefined
注意:此方法第一次跳转是没有问题的,参数也可以传过去,但是刷新页面后,参数就没了 (ps: 这个地方其实还有一个问题,当你传递的参数是number类型,第一次是没有问题的,获取的时候也是number类型,但是当你刷新页面后,number变成string类型,如果涉及计算的建议先类型转换一下)
第一次是预期结果 // 234
console.log(this.$route.params.id + 1)
刷新页面后直接字符串拼接了 // 2331
参数丢失解决方案:
routes: [ { path: '/details/:id', // 这里配置的要和你传递的参数名保持一致 name: 'details', component: resolve => require(['../components/details'], resolve) } ]
2. path和query组合传参
this.$router.push({path: '/details', query: {id: 666}})
this.$route.query.id // 666
此方法参数会跟在问号后面 例如:/details?id=666,该方法刷新页面不会丢失参数
看完上述内容,你们掌握使用vue-router进行传参时需要注意哪些事项的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注创新互联行业资讯频道,感谢各位的阅读!
分享题目:使用vue-router进行传参时需要注意哪些事项
URL分享:http://scyanting.com/article/geihcj.html