详解新手使用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 相关文章推荐
js宝典学习笔记(上)
Jan 10 Javascript
悬浮数字的实现案例
Feb 19 Javascript
随鼠标移动的时钟非常漂亮遗憾的是只支持IE
Aug 12 Javascript
JS简单实现多级Select联动菜单效果代码
Sep 06 Javascript
js获取form表单所有数据的简单方法
Aug 18 Javascript
vue组件间通信解析
Mar 01 Javascript
npm国内镜像 安装失败的几种解决方案
Jun 04 Javascript
vue组件watch属性实例讲解
Nov 07 Javascript
重学 JS:为啥 await 不能用在 forEach 中详解
Apr 15 Javascript
微信小程序+腾讯地图开发实现路径规划绘制
May 22 Javascript
jQuery 隐藏/显示效果函数用法实例分析
May 20 jQuery
jQuery实现移动端笔触canvas电子签名
May 21 jQuery
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设计模式 Composite (组合模式)
2011/06/26 PHP
php生成图形验证码几种方法小结
2013/08/15 PHP
Symfony的安装和配置方法
2016/03/17 PHP
thinkphp制作404跳转页的简单实现方法
2016/09/22 PHP
javascript 兼容FF的onmouseenter和onmouseleave的代码
2008/07/19 Javascript
jQuery中选择器小问题(新人难免遇到)
2014/03/31 Javascript
JavaScript对数组进行随机重排的方法
2015/07/22 Javascript
jQuery取消特定的click事件
2016/02/29 Javascript
html、css和jquery相结合实现简单的进度条效果实例代码
2016/10/24 Javascript
angularjs 实现带查找筛选功能的select下拉框实例
2017/01/11 Javascript
node.js与C语言 实现遍历文件夹下最大的文件,并输出路径,大小
2017/01/20 Javascript
jQuery实现左右滑动的toggle方法
2018/03/03 jQuery
详解Vue Elementui中的Tag与页面其它元素相互交互的两三事
2018/09/25 Javascript
axios取消请求的实践记录分享
2018/09/26 Javascript
javascript实现文本框标签验证的实例代码
2018/10/14 Javascript
详解react阻止无效重渲染的多种方式
2018/12/11 Javascript
微信小程序登录session的使用
2019/03/17 Javascript
Vue组件内部实现一个双向数据绑定的实例代码
2019/04/04 Javascript
qrcode生成二维码微信长按无法识别问题的解决
2019/04/04 Javascript
JS模拟浏览器实现全局搜索功能
2019/09/11 Javascript
el-form 多层级表单的实现示例
2020/09/10 Javascript
[00:30]塑造者的传承礼包-戴泽“暗影之焰”套装展示视频
2014/04/04 DOTA
Python中asyncore的用法实例
2014/09/29 Python
Python类方法__init__和__del__构造、析构过程分析
2015/03/06 Python
Python实现好友全头像的拼接实例(推荐)
2017/06/24 Python
python调用xlsxwriter创建xlsx的方法
2018/05/03 Python
在python tkinter中Canvas实现进度条显示的方法
2019/06/14 Python
Python OpenCV 调用摄像头并截图保存功能的实现代码
2019/07/02 Python
opencv之为图像添加边界的方法示例
2019/12/26 Python
Python3实现发送邮件和发送短信验证码功能
2020/01/07 Python
Python延迟绑定问题原理及解决方案
2020/08/04 Python
Nike法国官方网站:Nike.com FR
2018/07/22 全球购物
少儿节目主持串词
2014/04/02 职场文书
2015小学语文教师个人工作总结
2015/05/20 职场文书
简历中的自我评价应该这样写!
2019/07/12 职场文书
vue中使用mockjs配置和使用方式
2022/04/06 Vue.js