详解新手使用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 相关文章推荐
Enter回车切换输入焦点实现思路与代码兼容各大浏览器
Sep 01 Javascript
jQuery使用drag效果实现自由拖拽div
Jun 11 Javascript
JavaScript实现选择框按比例拖拉缩放的方法
Aug 04 Javascript
JavaScript蒙板(model)功能的简单实现代码
Aug 04 Javascript
微信和qq时间格式模板实例详解
Oct 21 Javascript
JS取数字小数点后两位或n位的简单方法
Oct 24 Javascript
jQuery将表单序列化成一个Object对象的实例
Nov 29 Javascript
JavaScript的for循环中嵌套一个点击事件的问题解决
Mar 03 Javascript
VUE v-model表单数据双向绑定完整示例
Jan 21 Javascript
详解js中let与var声明变量的区别
Apr 05 Javascript
JavaScript如何处理移动端拍摄图片旋转问题
Nov 16 Javascript
nginx配置域名后的二级目录访问不同项目的配置操作
Nov 06 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 高手之路(三)
2006/10/09 PHP
php生成文件
2007/01/15 PHP
解析dedecms空间迁移步骤详解
2013/05/15 PHP
php去除头尾空格的2种方法
2015/03/16 PHP
php计算整个目录大小的方法
2015/06/19 PHP
CI框架常用经典操作类总结(路由,伪静态,分页,session,验证码等)
2016/11/21 PHP
ThinkPHP 5 AJAX跨域请求头设置实现过程解析
2020/10/28 PHP
javascript 鼠标悬浮图片显示原图 移出鼠标后原图消失(多图)
2009/12/28 Javascript
在IE浏览器中resize事件执行多次的解决方法
2011/07/12 Javascript
JavaScript高级程序设计 阅读笔记(四) ECMAScript中的类型转换
2012/02/27 Javascript
返回顶部按钮响应滚动且动态显示与隐藏
2014/10/14 Javascript
JavaScript的原型继承详解
2015/02/15 Javascript
JavaScript中的splice方法用法详解
2016/07/20 Javascript
浅谈Vue.js
2017/03/02 Javascript
带你了解session和cookie作用原理区别和用法
2017/08/14 Javascript
vue-ajax小封装实例
2017/09/18 Javascript
JavaScript实现左侧菜单效果
2017/12/14 Javascript
vue2.x 通过后端接口代理,获取qq音乐api的数据示例
2019/10/30 Javascript
Echarts实现单条折线可拖拽效果
2019/12/19 Javascript
openlayers 3实现车辆轨迹回放
2020/09/24 Javascript
python错误:AttributeError: 'module' object has no attribute 'setdefaultencoding'问题的解决方法
2014/08/22 Python
python实现csv格式文件转为asc格式文件的方法
2018/03/23 Python
python网络爬虫学习笔记(1)
2018/04/09 Python
详解python中TCP协议中的粘包问题
2019/03/22 Python
pandas read_excel()和to_excel()函数解析
2019/09/19 Python
Django使用rest_framework写出API
2020/05/21 Python
HTML5中input输入框默认提示文字向左向右移动的示例代码
2020/09/10 HTML / CSS
英国厨房与餐具用品为主的设计品牌:Joseph Joseph
2018/04/26 全球购物
申报职称专业技术个人的自我评价
2013/12/12 职场文书
《草原》教学反思
2014/02/15 职场文书
出纳担保书范文
2014/04/02 职场文书
《少年王勃》教学反思
2014/04/27 职场文书
升职自荐信范文
2015/03/27 职场文书
2016高校自主招生自荐信范文
2016/01/28 职场文书
2019银行竞聘书
2019/06/21 职场文书
深入理解CSS 中 transform matrix矩阵变换问题
2021/08/30 HTML / CSS