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 相关文章推荐
把textarea中字符串里含有的回车换行替换成<br>的javascript代码
Apr 20 Javascript
JS无限树状列表实现代码
Jan 11 Javascript
基于JavaScript 类的使用详解
May 07 Javascript
JS格式化数字保留两位小数点示例代码
Oct 15 Javascript
jquery属性选择器not has怎么写 行悬停高亮显示
Nov 13 Javascript
jquery取消选择select下拉框示例代码
Feb 22 Javascript
JavaScript模拟数组合并concat
Mar 06 Javascript
JavaScript+Java实现HTML页面转为PDF文件保存的方法
May 30 Javascript
微信小程序 选项卡的简单实例
May 24 Javascript
vue通过指令(directives)实现点击空白处收起下拉框
Dec 06 Javascript
详解微信小程序调用支付接口支付
Apr 28 Javascript
在Vue mounted方法中使用data变量详解
Nov 05 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
PHP 5.0对象模型深度探索之绑定
2006/09/05 PHP
浅析linux下apache服务器的配置和管理
2013/08/10 PHP
PHP魔术引号所带来的安全问题分析
2014/07/15 PHP
字符串长度函数strlen和mb_strlen的区别示例介绍
2014/09/09 PHP
Laravel 5 框架入门(三)
2015/04/09 PHP
详细解读php的命名空间(二)
2018/02/21 PHP
javascript中利用数组实现的循环队列代码
2010/01/24 Javascript
js中匿名函数的N种写法
2010/09/08 Javascript
File, FileReader 和 Ajax 文件上传实例分析(php)
2011/04/27 Javascript
JS教程:window.location使用方法的区别介绍
2013/10/04 Javascript
javascript中createElement的两种创建方式
2015/05/14 Javascript
JavaScript中exec函数用法实例分析
2015/06/08 Javascript
js实现网页图片延时加载 提升网页打开速度
2016/01/26 Javascript
BootStrap中关于Select下拉框选择触发事件及扩展
2016/11/22 Javascript
js-FCC算法-No repeats please字符串的全排列(详解)
2017/05/02 Javascript
input 标签实现输入框带提示文字效果(两种方法)
2017/10/09 Javascript
Vue精简版风格指南(推荐)
2018/01/30 Javascript
JavaScript使用math.js进行精确计算操作示例
2018/06/19 Javascript
浅谈Webpack核心模块tapable解析
2018/09/11 Javascript
小程序获取周围IBeacon设备的方法
2018/10/31 Javascript
Angular2 自定义表单验证器的实现方法
2018/12/14 Javascript
js通过canvas生成图片缩略图
2020/10/02 Javascript
Python实现可设置持续运行时间、线程数及时间间隔的多线程异步post请求功能
2018/01/11 Python
python使用time、datetime返回工作日列表实例代码
2019/05/09 Python
Django 多环境配置详解
2019/05/14 Python
对python中的装包与解包实例详解
2019/08/24 Python
在网上学习全世界最好的课程:Coursera
2017/11/07 全球购物
大课间活动实施方案
2014/03/06 职场文书
求职信结尾怎么写
2014/05/26 职场文书
2014年乡镇安全生产工作总结
2014/12/02 职场文书
公文写作:工伤事故分析报告怎么写?
2019/11/05 职场文书
python 用递归实现通用爬虫解析器
2021/04/16 Python
Golang 正则匹配效率详解
2021/04/25 Golang
教你解决往mysql数据库中存入汉字报错的方法
2021/05/06 MySQL
PHP遍历数组的6种方式总结
2021/11/17 PHP
Html5获取用户当前位置的几种方式
2022/01/18 HTML / CSS