详解新手使用vue-router传参时注意事项
更新时间：2019年06月06日 11:18:51 作者：JoySang
这篇文章主要介绍了详解新手使用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)
}
]
2. path和query组合传参
this.$router.push({path: '/details', query: {id: 666}})
this.$route.query.id // 666
此方法参数会跟在问号后面 例如：/details?id=666，该方法刷新页面不会丢失参数
最后：根据自己的项目选择合适的传参方式
官方文档vue-router
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
本文介绍了Vue keep-alive组件的使用及如何清除缓存,给大家分享清除缓存的几种方法,结合实例代码给大家讲解的非常详细,需要的朋友跟随小编一起看看吧2023-10-10
Google 给 Chrome 浏览器加了一个有趣的彩蛋，本文就详细的介绍一下Vue实现Chrome小恐龙游戏的示例代码，具有一定的参考价值，感兴趣的可以了解一下2022-04-04
这篇文章主要为大家详细介绍了vue实现通讯录功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-07-07
这篇文章主要介绍了关于TypeScript的踩坑记录，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
使用element-ui,el-row中的el-col数据为空页面布局变乱问题
这篇文章主要介绍了使用element-ui,el-row中的el-col数据为空页面布局变乱问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-08-08
这篇文章主要为大家详细介绍了vue3如何引用elementUI实现悬浮文本输入框效果,以便实现多行文本输入,感兴趣的小伙伴可以跟随小编一起学习一下2023-10-10
Vue 创建组件的方法有哪些呢？下面小编就为大家分享一篇Vue 创建组件的两种方法小结，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
VUE中的export default和export使用方法解析
export default和export都能导出一个模块里面的常量，函数，文件，模块等，在其它文件或模块中通过import来导入常量，函数，文件或模块。但是，在一个文件或模块中export,import可以有多个，export default却只能有一个。2022-12-12
这篇文章主要为大家详细介绍了vue实现日历组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
今天小编就为大家分享一篇vue.js 实现点击按钮动态添加li的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
最新评论