当前位置: 首页 > news >正文

router和route 传参接收参数的应用

项目中我们一般都避免不了传参,传参方式有很多,但是我用的最多的还是

router 和route

,虽然比较老套,但是很好用
首先我们明确一点router和route的定义

1 .router是VueRouter的一个对象,通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象,这个对象中是一个全局的对象,他包含了所有的路由包含了许多关键的对象和属性。

2 .route是一个跳转的路由对象,每一个路由都会有一个route对象,是一个局部的对象,可以获取对应的name,path,params,query等

我们在事件中一般是查看的时候会进行页面详情跳转

假设我们有个事件edit,
那么我们methods 里就会有一个事件函数 edit(row){},
如果我们用UI框架,那么匹配的就会得到一个id ,不然就要自己获取到id,
把这个id 通过

 this.$router.push(name:'aaaaa', params:{id:row.id}) 

的方式传给另个页面了。

 edit(row){
 console.log('点击了查看看', row)
  this.$router.push(
  name:'aaaaa',
   params:{id:row.id})
},

另个页面接收,建议在mounted 钩子函数中接收。。因为mounted 只加载一次

mounted() {
	console.log(this.$route.params)
	//在data中可以设置全局的接收传过来的参数进行赋值,建议这样,这样比较好操作。
	通过this.$route.params传过来什么你直接赋值就行
	this.id = this.$route.params.id
	this.name = this.$route.params.name
}

相关文章:

  • 阿里巴巴SUI Mobile的使用
  • 关于时间向前推算到天,并且算闰年的计算
  • Android传递Bitmap的两种简单方式及其缺陷
  • Android中的mvp
  • 前端初始化项目对axios的封装和token的存储应用以及config.js代理的配置 比较全的了。
  • 开机自启动redis
  • 在一个div标签中平行放置两个echarts 环形图
  • node-webkit,html打包成桌面应用,pc应用
  • 【HTML5】Web存储
  • 利用 vuex写一个todoList
  • Java日志组件2---Log4j(org.apache.log4j.Logger)
  • react项目搭建
  • mybatis3.0 配置等值连接两种方式:resultMap和resulttype
  • react官方脚手架安装
  • 怎么用ChemDraw 15.1 Pro绘制彩色结构
  • [LeetCode] Wiggle Sort
  • 【跃迁之路】【669天】程序员高效学习方法论探索系列(实验阶段426-2018.12.13)...
  • axios 和 cookie 的那些事
  • CentOS 7 修改主机名
  • C学习-枚举(九)
  • docker python 配置
  • Druid 在有赞的实践
  • JAVA_NIO系列——Channel和Buffer详解
  • JavaScript 无符号位移运算符 三个大于号 的使用方法
  • Java精华积累:初学者都应该搞懂的问题
  • LeetCode541. Reverse String II -- 按步长反转字符串
  • MySQL几个简单SQL的优化
  • Vue官网教程学习过程中值得记录的一些事情
  • Xmanager 远程桌面 CentOS 7
  • 基于组件的设计工作流与界面抽象
  • 今年的LC3大会没了?
  • 时间复杂度与空间复杂度分析
  • 【运维趟坑回忆录 开篇】初入初创, 一脸懵
  • 好程序员web前端教程分享CSS不同元素margin的计算 ...
  • 你学不懂C语言,是因为不懂编写C程序的7个步骤 ...
  • 小白应该如何快速入门阿里云服务器,新手使用ECS的方法 ...
  • $$$$GB2312-80区位编码表$$$$
  • $jQuery 重写Alert样式方法
  • (2)(2.10) LTM telemetry
  • (Redis使用系列) Springboot 整合Redisson 实现分布式锁 七
  • (附源码)spring boot北京冬奥会志愿者报名系统 毕业设计 150947
  • (区间dp) (经典例题) 石子合并
  • (三十五)大数据实战——Superset可视化平台搭建
  • (转)h264中avc和flv数据的解析
  • (转)树状数组
  • *Django中的Ajax 纯js的书写样式1
  • .\OBJ\test1.axf: Error: L6230W: Ignoring --entry command. Cannot find argumen 'Reset_Handler'
  • .FileZilla的使用和主动模式被动模式介绍
  • .java 指数平滑_转载:二次指数平滑法求预测值的Java代码
  • .NET 4.0中的泛型协变和反变
  • .NET CF命令行调试器MDbg入门(一)
  • .net 简单实现MD5
  • .NET/C# 在代码中测量代码执行耗时的建议(比较系统性能计数器和系统时间)...
  • .net分布式压力测试工具(Beetle.DT)
  • .NET简谈设计模式之(单件模式)