vue组件之间通过query传递参数
需求:
从 任务列表进入 任务详情 ,向详情页传递当前 mission_id 值
路由关系:
//查看任务列表
{
path: '/worklist',
name: 'worklist',
component: worklist,
},
//任务详情
{
path: '/workdetails',
name: 'workdetails',
meta: {
requireAuth: true //需要先登录
},
component: workdetails
},
worklist.vue传递
<router-link :to="{
path: '/workdetails',
query: {
mission_id: index.mission_id //当前missionID
}
}"
class="aaalistlink">
<el-button icon="el-icon-search" circle type="danger" class="check"></el-button>
</router-link>
workdetails.vue 中接收参数
var data = {
mission_id : this.$route.query.mission_id, //传递的missionID
user_id : this.$store.state.user_id
}
vue组件之间通过query传递参数的更多相关文章
- vue组件之间数据的传递
父子组件通信 父组件向子组件传递数据: 1.通过子组件的 props 选项声明它期待获得的数据,用以接收父组件传过来的值. 2.在子组件标签中使用子组件props中创建的属性 3.父组件中注册子组件 ...
- vue 组件之间的数据传递
父组件传数据给子组件 创建数据 获取json数据 子组件传数据给父组件 1. 子组件使用$emit监听数据 getAreaValues(){ this.$emit('getAreaValues', { ...
- Vue 爬坑之路(二)—— 组件之间的数据传递
Vue 的组件作用域都是孤立的,不允许在子组件的模板内直接引用父组件的数据.必须使用特定的方法才能实现组件之间的数据传递. 首先用 vue-cli 创建一个项目,其中 App.vue 是父组件,com ...
- Vue基础知识之组件及组件之间的数据传递(五)
vue中的组件是自定的标签,可以扩展的原生html元素,封装可复用的代码 note: 1.在标签命中不要使用大写,标签名字必须用短横线隔开 2.模板中只能有一个根元素,不能使用并列标签. 定义组件 全 ...
- (转)Vue 爬坑之路(二)—— 组件之间的数据传递
Vue 的组件作用域都是孤立的,不允许在子组件的模板内直接引用父组件的数据.必须使用特定的方法才能实现组件之间的数据传递. 首先用 vue-cli 创建一个项目,其中 App.vue 是父组件,com ...
- 解决vue不相关组件之间的数据传递----vuex的学习笔记,解决报错this.$store.commit is not a function
Vue的项目中,如果项目简单, 父子组件之间的数据传递可以使用 props 或者 $emit 等方式 进行传递 但是如果是大中型项目中,很多时候都需要在不相关的平行组件之间传递数据,并且很多数据需要 ...
- Vue之组件之间的数据传递
Vue的组件作用域都是孤立的,不允许在子组件的模板内直接引用父组件的数据,必须使用特定的方法才能实现组件之间的数据传递. 下列为在vue-cli创建项目中的操作 一·父组件向子组件传递数据 在Vue中 ...
- 【整理】解决vue不相关组件之间的数据传递----vuex的学习笔记,解决报错this.$store.commit is not a function
解决vue不相关组件之间的数据传递----vuex的学习笔记,解决报错this.$store.commit is not a function https://www.cnblogs.com/jaso ...
- vue.js 同级组件之间的值传递方法(uni-app通用)
vue.js 兄弟组件之间的值传递方法 https://blog.csdn.net/jingtian678/article/details/81634149
随机推荐
- 帮助你构建云服务的开源平台:openstack
from:http://os.51cto.com/art/201205/336386_all.htm 概念架构 3-5 OpenStack Compute服务架构 点评:从openstack的能力来看 ...
- spring security四种实现方式
spring security四种实现方式 spring(20) > 目录(?)[+] 最简单配置spring-securityxml实现1 实现UserDetailsService 实现动态过 ...
- Directx11教程(67) 显示模型文件
原文:Directx11教程(67) 显示模型文件 在前面的教程中,我们都是通过在ModelClass中直接产生顶点和索引数据,简单的三角形,立方体等等还好说,毕竟比较简单,如何显示复杂的 ...
- vue2-vux-fitness-project
非常感谢那些无私开源的程序员,希望我也能够有能力像你们那样,开源很多很有意思的东西~~ //index.html <!DOCTYPE html> <html> <head ...
- 用var 变量=函数名 方式调用函数时如何传值的问题
通过:xmlhttp.onreadystatechange= function(){FuncName(param)};orxmlhttp.onreadystatechange= new Functio ...
- MaxCompute助力小影短视频走向全球化
数字时代,中国已经成为世界互联网的中心,小影(海外版称作为VivaVideo,后简称VivaVideo)作为国内首批短视频出海企业,借助统一的云计算平台快速实现全球业务的线上部署,已经让每一行代码都获 ...
- python系列之(5)PyMySQL的使用
简介 PyMySQL是在 Python3.x 版本中用于连接 MySQL 服务器的一个库,Python2中是使用mysqldb. 安装 pip3 install pymysql 创建连接 #!/usr ...
- Python里的堆heapq
实际上,Python没有独立的堆类型,而只有一个包含一些堆操作函数的模块.这个模块名为heapq(其中的q表示队列),默认为小顶堆.Python中没有大顶堆的实现. 常用的函数 函 数 描 述 hea ...
- iOS 三种打电话方式
//1,这种方法,拨打完电话回不到原来的应用,会停留在通讯录里,而且是直接拨打,不弹出提示 NSMutableString * str=[[NSMutableString alloc] initWit ...
- EL表达式简单总结
EL表达式 ## EL表达式的取值范围 JSP的四个作用域: pagecontext(生命周期用户离开或者跳转页面,作用域范围这个页面) request(生命周期用户离开页面,作用于这个页面) ses ...