详解新手使用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 相关文章推荐
一段实时更新的时间代码
Jul 07 Javascript
ie和firefox中img对象区别的困惑
Dec 27 Javascript
javascript 写类方式之四
Jul 05 Javascript
jquery.AutoComplete.js中文修正版(支持firefox)
Apr 09 Javascript
jQuery基础框架浅入剖析
Dec 27 Javascript
JS设置网页图片vspace和hspace属性的方法
Apr 01 Javascript
JQuery控制Radio选中方法分析
May 29 Javascript
你知道setTimeout是如何运行的吗?
Aug 16 Javascript
Bootstrap精简教程中秋大放送
Sep 15 Javascript
微信小程序上传图片实例
May 28 Javascript
Vue触发隐藏input file的方法实例详解
Aug 14 Javascript
原生JS实现音乐播放器的示例代码
Feb 25 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文件的实现方法
2007/03/19 PHP
PHPCMS忘记后台密码的解决办法
2016/10/30 PHP
PHP7扩展开发教程之Hello World实现方法示例
2017/08/03 PHP
XmlUtils JS操作XML工具类
2009/10/01 Javascript
模拟电子签章盖章效果的jQuery插件源码
2013/06/24 Javascript
动态标签 悬停效果 延迟加载示例代码
2013/11/21 Javascript
整理的比较全的event对像在ie与firefox浏览器中的区别
2013/11/25 Javascript
js实现的类似于asp数据字典的数据类型代码实例
2014/09/03 Javascript
javascript实现可拖动变色并关闭层窗口实例
2015/05/15 Javascript
深入理解angular2启动项目步骤
2017/07/15 Javascript
微信小程序实现折叠与展开文章功能
2018/06/12 Javascript
JavaScript折半查找(二分查找)算法原理与实现方法示例
2018/08/06 Javascript
django中使用vue.js的要点总结
2019/07/07 Javascript
详解vue-cli项目开发/生产环境代理实现跨域请求
2019/07/23 Javascript
如何阻止小程序遮罩层下方图层滚动
2019/09/05 Javascript
Vue为什么要谨慎使用$attrs与$listeners
2020/08/27 Javascript
jQuery实现查看图片功能
2020/12/01 jQuery
[49:29]LGD vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
[51:00]Secret vs VGJ.S 2018国际邀请赛淘汰赛BO3 第一场 8.24
2018/08/25 DOTA
Python 使用os.remove删除文件夹时报错的解决方法
2017/01/13 Python
Python编程判断一个正整数是否为素数的方法
2017/04/14 Python
Python编程实现粒子群算法(PSO)详解
2017/11/13 Python
python3实现字符串的全排列的方法(无重复字符)
2018/07/07 Python
使用 Python 实现简单的 switch/case 语句的方法
2018/09/17 Python
Python devel安装失败问题解决方案
2020/06/09 Python
html5 拖拽上传图片实例演示
2013/04/01 HTML / CSS
Html5页面获取微信公众号的openid的方法
2020/05/12 HTML / CSS
太阳镜仓库,售价20美元或更少:Sunglass Warehouse
2016/09/28 全球购物
写给保洁员表扬信
2014/01/08 职场文书
《秋游》教学反思
2014/04/24 职场文书
运动会广播稿诗歌版
2014/09/12 职场文书
2014年村委会工作总结
2014/11/24 职场文书
校友回访母校寄语
2015/02/26 职场文书
行政介绍信范文
2015/05/04 职场文书
MySQL 开窗函数
2022/02/15 MySQL
Android开发EditText禁止输入监听及InputFilter字符过滤
2022/06/10 Java/Android