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 相关文章推荐
jQuery 获取对象 基本选择与层级
May 31 Javascript
学习并汇集javascript匿名函数
Nov 25 Javascript
用box固定长宽实现图片自动轮播js代码
Jun 09 Javascript
JavaScript中的Math.atan2()方法使用详解
Jun 15 Javascript
JavaScript实现点击按钮就复制当前网址
Dec 14 Javascript
JS组件Bootstrap ContextMenu右键菜单使用方法
Apr 17 Javascript
jQuery实现区域打印功能代码详解
Jun 17 Javascript
jQuery简单动画变换效果实例分析
Jul 04 Javascript
JavaScript中误用/g导致的正则test()无法正确重复执行的解决方案
Jul 27 Javascript
jquery animate动画持续运动的实例
Nov 29 jQuery
JS实现的冒泡排序,快速排序,插入排序算法示例
Mar 02 Javascript
在Vue中使用antv的示例代码
Jun 29 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
wordpress之wp-settings.php
2007/08/17 PHP
PHP中的string类型使用说明
2010/07/27 PHP
php生成txt文件标题及内容的方法
2014/01/16 PHP
php命令行使用方法和命令行参数说明
2014/04/08 PHP
PH P5.2至5.5、5.6的新增功能详解
2014/07/14 PHP
Linux系统下使用XHProf和XHGui分析PHP运行性能
2015/12/08 PHP
基于PHP技术开发客服工单系统
2016/01/06 PHP
php使用mysqli和pdo扩展,测试对比连接mysql数据库的效率完整示例
2019/05/09 PHP
基于JavaScript实现继承机制之调用call()与apply()的方法详解
2013/05/07 Javascript
了解了这些才能开始发挥jQuery的威力
2013/10/10 Javascript
简单的代码实现jquery定时器
2013/11/17 Javascript
jquery easyui 对于开始时间小于结束时间的判断示例
2014/03/22 Javascript
js获取上传文件大小示例代码
2014/04/10 Javascript
微信小程序 数据遍历的实现
2017/04/05 Javascript
JavaScript基于replace+正则实现ES6的字符串模版功能
2017/04/25 Javascript
JS库之Three.js 简易入门教程(详解之一)
2017/09/13 Javascript
ajax请求+vue.js渲染+页面加载的示例
2018/02/11 Javascript
详解react内联样式使用webpack将px转rem
2018/09/13 Javascript
JS实现灯泡开关特效
2020/03/30 Javascript
详解JavaScript中的Object.is()与"==="运算符总结
2020/06/17 Javascript
解决antd日期选择组件,添加value就无法点击下一年和下一月问题
2020/10/29 Javascript
[06:36]吞吞映像top1
2014/06/20 DOTA
[38:32]DOTA2上海特级锦标赛A组资格赛#2 Secret VS EHOME第二局
2016/02/26 DOTA
[00:43]拉比克至宝魔导师密钥展示
2018/12/20 DOTA
python Xpath语法的使用
2020/11/26 Python
Hotels.com加拿大:领先的在线住宿网站
2018/10/05 全球购物
会计专业自荐信范文
2013/12/02 职场文书
工程造价专业大学生职业生涯规划书
2014/01/18 职场文书
中介公司区域经理岗位职责范本
2014/03/02 职场文书
家长对老师的评语
2014/04/18 职场文书
新学期国旗下演讲稿
2014/05/08 职场文书
学生逃课万能检讨书2000字
2015/02/17 职场文书
保护地球的宣传语
2015/07/13 职场文书
2019年恭贺升学祝福语集锦
2019/08/15 职场文书
使用Redis实现点赞取消点赞的详细代码
2022/03/20 Redis
Nginx配置根据url参数重定向
2022/04/11 Servers