详解新手使用vue-router传参时注意事项


Posted in Javascript onJune 06, 2019

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

详解新手使用vue-router传参时注意事项

刷新参数丢失 显示 undefined

this.$route.params.id // undefined

详解新手使用vue-router传参时注意事项

注意:此方法第一次跳转是没有问题的,参数也可以传过去,但是刷新页面后,参数就没了 (ps: 这个地方其实还有一个问题,当你传递的参数是number类型,第一次是没有问题的,获取的时候也是number类型,但是当你刷新页面后,number变成string类型,如果涉及计算的建议先类型转换一下)

第一次是预期结果 // 234

console.log(this.$route.params.id + 1)

详解新手使用vue-router传参时注意事项

刷新页面后直接字符串拼接了 // 2331

详解新手使用vue-router传参时注意事项

参数丢失解决方案:

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

详解新手使用vue-router传参时注意事项

此方法参数会跟在问号后面 例如:/details?id=666,该方法刷新页面不会丢失参数

最后:根据自己的项目选择合适的传参方式

官方文档vue-router

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
prototype1.4中文手册
Sep 22 Javascript
新老版本juqery获取radio对象的方法
Mar 01 Javascript
jQuery操作Select选择的Text和Value(获取/设置/添加/删除)
Mar 06 Javascript
js实现数字每三位加逗号的方法
Feb 05 Javascript
JavaScript DOM基础
Apr 13 Javascript
jQuery添加和删除输入文本框标签代码
May 20 Javascript
BootStrap树状图显示功能
Nov 24 Javascript
JavaScript自动点击链接 防止绕过浏览器访问的方法
Jan 19 Javascript
AngularJS  ng-repeat遍历输出的用法
Jun 19 Javascript
Three.js加载外部模型的教程详解
Nov 10 Javascript
Vue+jquery实现表格指定列的文字收缩的示例代码
Jan 09 jQuery
浅谈React中组件间抽象
Jan 27 Javascript
vue-cli配置全局sass、less变量的方法
Jun 06 #Javascript
解决vue组件props传值对象获取不到的问题
Jun 06 #Javascript
webpack4之如何编写loader的方法步骤
Jun 06 #Javascript
vue 插件的方法代码详解
Jun 06 #Javascript
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
Jun 06 #jQuery
node.js的http.createServer过程深入解析
Jun 06 #Javascript
vue中keep-alive组件的入门使用教程
Jun 06 #Javascript
You might like
PHP面向对象之旅:深入理解static变量与方法
2014/01/06 PHP
php生成PDF格式文件并且加密
2015/06/22 PHP
Yii-自定义删除确认弹框(zyd)jquery实现代码
2013/03/04 Javascript
JavaScript的事件绑定(方便不支持js的时候)
2013/10/01 Javascript
鼠标滑在标题上显示图片的JS代码
2013/11/19 Javascript
JavaScript获取当前日期是星期几的方法
2015/04/06 Javascript
js+html5获取用户地理位置信息并在Google地图上显示的方法
2015/06/05 Javascript
JS实现搜索框文字可删除功能
2016/12/28 Javascript
前端开发必知的15个jQuery小技巧
2017/01/22 Javascript
Vue中建立全局引用或者全局命令的方法
2017/08/21 Javascript
解决node修改后需频繁手动重启的问题
2018/05/13 Javascript
在vue中使用setInterval的方法示例
2019/04/16 Javascript
vue 引用自定义ttf、otf、在线字体的方法
2019/05/09 Javascript
vue图片加载失败时用默认图片替换的方法
2019/08/29 Javascript
Node.js实现批量下载图片简单操作示例
2020/01/18 Javascript
微信小程序scroll-view点击项自动居中效果的实现
2020/03/25 Javascript
IDEA配置jQuery, $符号不再显示黄色波浪线的问题
2020/10/09 jQuery
python根据文本生成词云图代码实例
2019/11/15 Python
Python udp网络程序实现发送、接收数据功能示例
2019/12/09 Python
python怎么判断模块安装完成
2020/06/19 Python
vscode调试django项目的方法
2020/08/06 Python
使用CSS3来制作消息提醒框
2015/07/12 HTML / CSS
详解CSS3原生支持div铺满浏览器的方法
2018/08/30 HTML / CSS
师范应届毕业生自荐信
2013/11/18 职场文书
2014两会学习心得:榜样精神伴我行
2014/03/17 职场文书
植树节标语
2014/06/27 职场文书
经典演讲稿开场白
2014/08/25 职场文书
2014教师教育实践活动对照检查材料思想汇报
2014/09/21 职场文书
挂职个人工作总结
2015/03/05 职场文书
元旦主持词开场白
2015/05/29 职场文书
团结主题班会
2015/08/13 职场文书
教师理论学习心得体会
2016/01/21 职场文书
python 中[0]*2与0*2的区别说明
2021/05/10 Python
使用Java去实现超市会员管理系统
2022/03/18 Java/Android
Golang 遍历二叉树
2022/04/19 Golang
苹果可能正在打击不进行更新的 App
2022/04/24 数码科技