这篇文章主要介绍了详解新手使用vue-router传参时注意事项，详细的介绍了几种常见错误，需要的朋友们下面随着小编来一起学习学习吧
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) } ]
本文来源gaodai$ma#com搞$$代**码网$2. path和query组合传参
this.$router.push({path: '/details', query: {id: 666}})
this.$route.query.id // 666
此方法参数会跟在问号后面 例如：/details?id=666，该方法刷新页面不会丢失参数
最后：根据自己的项目选择合适的传参方式
官方文档vue-router
以上就是详解新手使用vue-router传参时注意事项的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：详解新手使用vue-router传参时注意事项
转载请注明原文链接：详解新手使用vue-router传参时注意事项
