详解新手使用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拖拽的效果类和dom-drag.js浅析
Jul 17 Javascript
javascript 事件绑定问题
Jan 01 Javascript
基于jQuery的input输入框下拉提示层(自动邮箱后缀名)
Jun 14 Javascript
几种延迟加载JS代码的方法加快网页的访问速度
Oct 12 Javascript
JavaScript中的ajax功能的概念和示例详解
Oct 17 Javascript
js实现定时进度条完成后切换图片
Jan 04 Javascript
js实现分页功能
May 24 Javascript
js实现下拉框二级联动
Dec 04 Javascript
微信小程序实现随机验证码功能
Dec 20 Javascript
使用vuex较为优雅的实现一个购物车功能的示例代码
Dec 09 Javascript
uni-app微信小程序登录授权的实现
May 22 Javascript
了不起的11个JavaScript代码重构最佳实践小结
Jan 11 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
SESSION信息保存在哪个文件目录下以及能够用来保存什么类型的数据
2012/06/17 PHP
php连接oracle数据库的核心步骤
2016/05/26 PHP
jQuery中的常用事件总结
2009/12/27 Javascript
javascript中的float运算精度实例分析
2010/08/21 Javascript
jQuery计算textarea中文字数(剩余个数)的小程序
2013/11/28 Javascript
javascript中的正则表达式使用指南
2015/03/01 Javascript
运行Node.js的IIS扩展iisnode安装配置笔记
2015/03/02 Javascript
基于jQuery实现鼠标点击导航菜单水波动画效果附源码下载
2016/01/06 Javascript
学习使用jquery iScroll.js移动端滚动条插件
2020/03/24 Javascript
JQuery DIV 动态隐藏和显示的方法
2016/06/23 Javascript
etmvc+jQuery EasyUI+combobox多值操作实现角色授权实例
2016/11/09 Javascript
Angular中自定义Debounce Click指令防止重复点击
2017/07/26 Javascript
Vue-Cli中自定义过滤器的实现代码
2017/08/12 Javascript
seajs模块压缩问题与解决方法实例分析
2017/10/10 Javascript
node实现基于token的身份验证
2018/04/09 Javascript
详解Vue+ElementUI从零开始搭建自己的网站(一、环境搭建)
2019/04/30 Javascript
layui table 表格上添加日期控件的两种方法
2019/09/28 Javascript
[02:54]DOTA2英雄基础教程 暗影牧师戴泽
2013/12/05 DOTA
python使用7z解压apk包的方法
2015/04/18 Python
在Python中操作字典之setdefault()方法的使用
2015/05/21 Python
浅谈python字典多键值及重复键值的使用
2016/11/04 Python
分享几道你可能遇到的python面试题
2017/07/24 Python
django model的update时auto_now不被更新的原因及解决方式
2020/04/01 Python
Python如何定义有可选参数的元类
2020/07/31 Python
Banggood官网:面向全球客户的综合商城
2017/04/19 全球购物
伊莱克斯(Electrolux)俄罗斯网上商店:瑞典家用电器品牌
2021/01/23 全球购物
世界经理人咨询有限公司面试
2014/09/23 面试题
给水工程专业毕业生自荐信
2014/01/28 职场文书
优良学风班申请材料
2014/02/13 职场文书
幼儿园课题方案
2014/06/09 职场文书
2014年商场国庆节活动策划方案
2014/09/16 职场文书
2014年超市工作总结
2014/11/19 职场文书
2015年大学元旦晚会活动策划书
2014/12/09 职场文书
求职简历自我评价2015
2015/03/10 职场文书
药店收银员岗位职责
2015/04/07 职场文书
英雄儿女观后感
2015/06/09 职场文书