需求:

从 任务列表进入 任务详情 ,向详情页传递当前 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传递参数的更多相关文章

  1. vue组件之间数据的传递

    父子组件通信 父组件向子组件传递数据: 1.通过子组件的 props 选项声明它期待获得的数据,用以接收父组件传过来的值. 2.在子组件标签中使用子组件props中创建的属性 3.父组件中注册子组件 ...

  2. vue 组件之间的数据传递

    父组件传数据给子组件 创建数据 获取json数据 子组件传数据给父组件 1. 子组件使用$emit监听数据 getAreaValues(){ this.$emit('getAreaValues', { ...

  3. Vue 爬坑之路(二)—— 组件之间的数据传递

    Vue 的组件作用域都是孤立的,不允许在子组件的模板内直接引用父组件的数据.必须使用特定的方法才能实现组件之间的数据传递. 首先用 vue-cli 创建一个项目,其中 App.vue 是父组件,com ...

  4. Vue基础知识之组件及组件之间的数据传递(五)

    vue中的组件是自定的标签,可以扩展的原生html元素,封装可复用的代码 note: 1.在标签命中不要使用大写,标签名字必须用短横线隔开 2.模板中只能有一个根元素,不能使用并列标签. 定义组件 全 ...

  5. (转)Vue 爬坑之路(二)—— 组件之间的数据传递

    Vue 的组件作用域都是孤立的,不允许在子组件的模板内直接引用父组件的数据.必须使用特定的方法才能实现组件之间的数据传递. 首先用 vue-cli 创建一个项目,其中 App.vue 是父组件,com ...

  6. 解决vue不相关组件之间的数据传递----vuex的学习笔记,解决报错this.$store.commit is not a function

    Vue的项目中,如果项目简单, 父子组件之间的数据传递可以使用  props 或者 $emit 等方式 进行传递 但是如果是大中型项目中,很多时候都需要在不相关的平行组件之间传递数据,并且很多数据需要 ...

  7. Vue之组件之间的数据传递

    Vue的组件作用域都是孤立的,不允许在子组件的模板内直接引用父组件的数据,必须使用特定的方法才能实现组件之间的数据传递. 下列为在vue-cli创建项目中的操作 一·父组件向子组件传递数据 在Vue中 ...

  8. 【整理】解决vue不相关组件之间的数据传递----vuex的学习笔记,解决报错this.$store.commit is not a function

    解决vue不相关组件之间的数据传递----vuex的学习笔记,解决报错this.$store.commit is not a function https://www.cnblogs.com/jaso ...

  9. vue.js 同级组件之间的值传递方法(uni-app通用)

    vue.js 兄弟组件之间的值传递方法 https://blog.csdn.net/jingtian678/article/details/81634149

随机推荐

  1. spring security四种实现方式

    spring security四种实现方式 spring(20) > 目录(?)[+] 最简单配置spring-securityxml实现1 实现UserDetailsService 实现动态过 ...

  2. oracle审计实施

    1.语句审计 Audit session;  Audit session By ; 与instance连接的每个会话生成一条审计记录.审计记录将在连接时期插入并且在断开连接时期进行更新. 保留有关会话 ...

  3. 网络流24题 餐巾计划(DCOJ8008)

    题目描述 一个餐厅在相继的 n nn 天里,每天需用的餐巾数不尽相同.假设第 i ii 天需要 ri r_ir​i​​ 块餐巾.餐厅可以购买新的餐巾,每块餐巾的费用为 P PP 分:或者把旧餐巾送到快 ...

  4. 发布SaaS加速器:我们不做SaaS,我们只做SaaS生态的推进者和守护者

    摘要: 此次阿里云推出的SaaS加速器,涵盖商业中心.能力中心.技术中心三大板块,是阿里巴巴商业.能力和技术的一次合力输出:技术能力在这里沉淀为一个个模块,ISV和开发者只要通过简单的操作,写很少的代 ...

  5. Spark in action on Kubernetes - 存储篇(一)

    前言 在上篇文章中,我们分析了Spark Operator内部的机制,今天我们会讨论一个在大数据领域中最重要的话题 - 存储.大数据已经无声无息的融入了每个人的生活中.大到旅游买房,小到外卖打车,都可 ...

  6. phpexcel使用说明4

    <div class="postBody"> <div id="cnblogs_post_body"><p>PHPExcel ...

  7. 快速完成智能数据构建,Dataphin公共云版本全面解读

    公测两个月,Dataphin公共云版本已经受到了阿里云上众多轻量级用户的关注.事实上,Dataphin作为一款大数据智能构建与管理的产品,其核心功能是面向各行各业大数据建设.管理及应用诉求,一站式提供 ...

  8. Libev源码分析08:Libev中的内存扩容方法

    在Libev中,如果某种结构的数组需要扩容,它使用array_needsize宏进行处理,比如: array_needsize (int, fdchanges, fdchangemax, fdchan ...

  9. AtCoder Regular Contest 059

    C - いっしょ / Be Together 数据比较小,暴力就挺好的.O(n^2)可过的好题 #include <bits/stdc++.h> using namespace std; ...

  10. day7_python之面向对象高级-反射

    反射:通过字符串去找到真实的属性,然后去进行操作 python面向对象中的反射:通过字符串的形式操作对象相关的属性.python中的一切事物都是对象(都可以使用反射) 1.两种方法访问对象的属性 cl ...