详解新手使用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 相关文章推荐
myeclipse安装jQuery插件的方法
Mar 29 Javascript
javascript 上下banner替换具体实现
Nov 14 Javascript
angularjs基础教程
Dec 25 Javascript
对jquery的ajax进行二次封装以及ajax缓存代理组件:AjaxCache详解
Apr 11 Javascript
原生JS实现图片网格式渐显、渐隐效果
Jun 05 Javascript
JavaScript之Map和Set_动力节点Java学院整理
Jun 29 Javascript
Angularjs实现上传图片预览功能
Sep 01 Javascript
使用Dropzone.js上传的示例代码
Oct 10 Javascript
解决layer 动态加载select 失效的问题
Sep 18 Javascript
JS动态显示倒计时效果
Dec 12 Javascript
微信小程序实现canvas分享朋友圈海报
Jun 21 Javascript
JS实现点击掉落特效
Jan 29 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制作简单的内容采集器的原理分析
2008/10/01 PHP
细谈php中SQL注入攻击与XSS攻击
2012/06/10 PHP
PDO防注入原理分析以及使用PDO的注意事项总结
2014/10/23 PHP
thinkphp 5框架实现登陆,登出及session登陆状态检测功能示例
2019/10/10 PHP
浅谈laravel aliases别名的原理
2019/10/24 PHP
Javascript !!的作用
2008/12/04 Javascript
jquery mobile实现拨打电话功能的几种方法
2013/08/05 Javascript
jquery 插件实现瀑布流图片展示实例
2015/04/03 Javascript
jQuery遍历DOM元素与节点方法详解
2016/04/14 Javascript
AngularJS 入门教程之HTML DOM实例详解
2016/07/28 Javascript
javascript中call,apply,bind函数用法示例
2016/12/19 Javascript
详解如何模拟实现node中的Events模块(通俗易懂版)
2019/04/15 Javascript
小程序跳转到的H5页面再跳转回跳小程序的方法
2020/03/06 Javascript
[01:43]深扒TI7聊天轮盘语音出处4
2017/05/11 DOTA
利用Python获取赶集网招聘信息前篇
2016/04/18 Python
python版简单工厂模式
2017/10/16 Python
python实现多人聊天室
2020/03/31 Python
Appium Python自动化测试之环境搭建的步骤
2019/01/23 Python
Python paramiko模块使用解析(实现ssh)
2019/08/30 Python
Django多进程滚动日志问题解决方案
2019/12/17 Python
tensorflow 重置/清除计算图的实现
2020/01/19 Python
python代码实现TSNE降维数据可视化教程
2020/02/28 Python
详解Python中pyautogui库的最全使用方法
2020/04/01 Python
Python 实现微信自动回复的方法
2020/09/11 Python
荷兰和比利时时尚鞋店:Van Dalen
2018/04/23 全球购物
中国一家综合的外贸B2C电子商务网站:DealeXtreme(DX)
2020/03/10 全球购物
新闻专业大学生找工作的自我评价
2013/10/30 职场文书
毕业生自我鉴定
2013/12/04 职场文书
韩国商务邀请函
2014/01/14 职场文书
运动员获奖感言
2014/08/15 职场文书
教师个人查摆剖析材料
2014/10/14 职场文书
护理工作心得体会
2016/01/22 职场文书
python正则表达式re.search()的基本使用教程
2021/05/21 Python
Python torch.flatten()函数案例详解
2021/08/30 Python
node快速搭建后台的实现步骤
2022/02/18 NodeJs