vue路由跳转传递参数的方式总结


Posted in Javascript onMay 10, 2020

日常业务中,路由跳转的同时传递参数是比较常见的,传参的方式有三种:

1)通过动态路由方式

//路由配置文件中 配置动态路由
{
   path: '/detail/:id',
   name: 'Detail',
   component: Detail
  }
//跳转时页面
var id = 1;
this.$router.push('/detail/' + id)
 
//跳转后页面获取参数
this.$route.params.id

2)通过query属性传值

//路由配置文件中
{
   path: '/detail',
   name: 'Detail',
   component: Detail
  }
//跳转时页面
this.$router.push({
 path: '/detail',
 query: {
  name: '张三',
  id: 1,
 }
})
 
//跳转后页面获取参数对象
this.$route.query

3)通过params属性传值

//路由配置文件中
{
   path: '/detail',
   name: 'Detail',
   component: Detail
  }
//跳转时页面
this.$router.push({
 name: 'Detail',
 params: {
  name: '张三',
  id: 1,
 }
})
 
//跳转后页面获取参数对象
this.$route.params

总结:

1.动态路由和query属性传值 页面刷新参数不会丢失, params会丢失

2.动态路由一般用来传一个参数时居多(如详情页的id), query、params可以传递一个也可以传递多个参数 。

补充方法:

页面刷新数据不会丢失

methods:{
 insurance(id) {
    //直接调用$router.push 实现携带参数的跳转
    this.$router.push({
     path: `/particulars/${id}`,
    })
}

需要对应路由配置如下:

this.$route.params.id

到此这篇关于vue路由跳转传递参数的方式总结的文章就介绍到这了,更多相关vue路由跳转传递参数的三种方式内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
javascript的offset、client、scroll使用方法详解
Dec 25 Javascript
js获取滚动距离的方法
May 30 Javascript
JS实现简单的二维矩阵乘积运算
Jan 26 Javascript
JavaScript实现多种排序算法
Feb 24 Javascript
Node.js中使用jQuery的做法
Aug 17 Javascript
jquery pagination分页插件使用详解(后台struts2)
Jan 22 Javascript
vue子父组件通信的实现代码
Jul 09 Javascript
详解jQuery同步Ajax带来的UI线程阻塞问题及解决办法
Aug 09 jQuery
Javascript中的getter和setter初识
Aug 17 Javascript
jQuery Datatable 多个查询条件自定义提交事件(推荐)
Aug 24 jQuery
two.js之实现动画效果示例
Nov 06 Javascript
JavaScript面向对象核心知识与概念归纳整理
May 09 Javascript
javascript单张多张图无缝滚动实例代码
May 10 #Javascript
JavaScript面试中常考的字符串操作方法大全(包含ES6)
May 10 #Javascript
js实现文章目录索引导航(table of content)
May 10 #Javascript
文章或博客自动生成章节目录索引(支持三级)的实现代码
May 10 #Javascript
vue滑动吸顶及锚点定位的示例代码
May 10 #Javascript
webpack+vue.js构建前端工程化的详细教程
May 10 #Javascript
JS实现单张或多张图片持续无缝滚动的示例代码
May 10 #Javascript
You might like
IIS php环境配置PHP5 MySQL5 ZendOptimizer phpmyadmin安装与配置
2008/11/18 PHP
C# Assembly类访问程序集信息
2009/06/13 PHP
PHP获取网址的顶级域名函数代码
2012/09/24 PHP
php防止sql注入示例分析和几种常见攻击正则表达式
2014/01/12 PHP
ExtJs 表单提交登陆实现代码
2010/08/19 Javascript
js 判断浏览器使用的语言示例代码
2014/03/22 Javascript
使用JavaScript的ActiveXObject对象检测应用程序是否安装的方法
2014/04/15 Javascript
js上传图片及预览功能实例分析
2015/04/24 Javascript
jQuery实现checkbox全选的方法
2015/06/10 Javascript
Javascript HTML5 Canvas实现的一个画板
2020/04/12 Javascript
Backbone View 之间通信的三种方式
2016/08/09 Javascript
jQuery中animate()的使用方法及解决$(”body“).animate({“scrollTop”:top})不被Firefox支持的问题
2017/04/04 jQuery
网页爬虫之cookie自动获取及过期自动更新的实现方法
2018/03/06 Javascript
nuxt.js 缓存实践
2018/06/25 Javascript
原生JS实现的轮播图功能详解
2018/08/06 Javascript
vue 左滑删除功能的示例代码
2019/01/28 Javascript
vue-router路由模式详解(小结)
2019/08/26 Javascript
Vue 中使用富文本编译器wangEditor3的方法
2019/09/26 Javascript
vue+springboot图片上传和显示的示例代码
2020/02/14 Javascript
如何在vue中使用jointjs过程解析
2020/05/29 Javascript
[01:21:58]守擂赛DOTA2第一周决赛
2020/04/22 DOTA
[09:13]DOTA2-DPC中国联赛 正赛 Ehome vs Magma 选手采访 1月19日
2021/03/11 DOTA
python实现从字符串中找出字符1的位置以及个数的方法
2014/08/25 Python
Python手机号码归属地查询代码
2016/05/04 Python
python 3.0 模拟用户登录功能并实现三次错误锁定
2017/11/01 Python
python实现彩票系统
2020/06/28 Python
Python快速转换numpy数组中Nan和Inf的方法实例说明
2019/02/21 Python
Happy Plugs官网:瑞典无线耳机品牌
2020/07/16 全球购物
经典优秀个人求职自荐信格式
2013/09/25 职场文书
电大学习个人自我评价范文
2013/10/04 职场文书
中药专业大学生医药工作求职信
2013/10/25 职场文书
连带责任保证书
2014/04/29 职场文书
保护环境倡议书500字
2014/05/19 职场文书
电子信息工程专业自荐书
2014/06/24 职场文书
幼儿园2016圣诞节活动总结
2016/03/31 职场文书
python基于opencv批量生成验证码的示例
2021/04/28 Python