![607ab50e9fced3705dc3cbfb06f01c60.png](https://img-blog.csdnimg.cn/img_convert/607ab50e9fced3705dc3cbfb06f01c60.png)
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
![43235888713092e981b08dc638002bcf.png](https://img-blog.csdnimg.cn/img_convert/43235888713092e981b08dc638002bcf.png)
刷新参数丢失 显示 undefined
this.$route.params.id // undefined
![30229e8513ca3a36e03dc9c54a65cec2.png](https://img-blog.csdnimg.cn/img_convert/30229e8513ca3a36e03dc9c54a65cec2.png)
注意:此方法第一次跳转是没有问题的,参数也可以传过去,但是刷新页面后,参数就没了 (ps: 这个地方其实还有一个问题,当你传递的参数是number类型,第一次是没有问题的,获取的时候也是number类型,但是当你刷新页面后,number变成string类型,如果涉及计算的建议先类型转换一下)
第一次是预期结果 // 234
console.log(this.$route.params.id + 1)
![8d93bfecc012024560120351f5329efa.png](https://img-blog.csdnimg.cn/img_convert/8d93bfecc012024560120351f5329efa.png)
刷新页面后直接字符串拼接了 // 2331
![65d43ef6b1812a8ec5f79868a1b299dc.png](https://img-blog.csdnimg.cn/img_convert/65d43ef6b1812a8ec5f79868a1b299dc.png)
参数丢失解决方案:
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
![718056574b945f1fa72e2f100ff3326b.png](https://img-blog.csdnimg.cn/img_convert/718056574b945f1fa72e2f100ff3326b.png)
此方法参数会跟在问号后面 例如:/details?id=666,该方法刷新页面不会丢失参数
最后:根据自己的项目选择合适的传参方式
官方文档vue-router(https://router.vuejs.org/zh/)
学习从来不是一个人的事情,要有个相互监督的伙伴,想要学习或交流前端问题的小伙伴可以私信“学习”小明加群获取2019web前端最新入门资料,一起学习,一起成长!