需求:

从 任务列表进入 任务详情 ,向详情页传递当前 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. 二.python数据结构的性能分析

    目录: 1.引言 2.列表 3.字典 一.引言 - 现在大家对 大O 算法和不同函数之间的差异有了了解.本节的目标是告诉你 Python 列表和字典操作的 大O 性能.然后我们将做一些基于时间的实验来 ...

  2. C++之以分隔符的形式获取字符串

    void CConvert::Split(const std::string& src, const std::string& separator, std::vector<st ...

  3. iOS支付宝2.0 SDK集成整理

    https://cshall.alipay.com/enterprise/help_detail.htm?help_id=473890 http://wenku.baidu.com/link?url= ...

  4. hdu4310 贪心

    考虑每次血口的要少 就按照一滴血多少伤害来计算.由于直接相除有小数.考虑x/y > a/b  =>  x*b >y*a; #include<stdio.h> #inclu ...

  5. 我的iOS高效编程秘诀—坚持编程习惯

    http://www.cocoachina.com/programmer/20150819/13103.html 作者:sunljz 授权本站转载. 习惯会影响一个人做事的方式,也会直接影响效率.我经 ...

  6. 机房收费系统——技术总结 标签: vb数据库技术 2014-09-07 22:29 1153人阅读 评论(30)

    说完了经验,再谈谈技术方面,其实对于技术,师哥师姐们都已经写了好多博客,这也是我在敲机房几乎没写这方面的博客的原因,不过别人的再好也是别人的,下面说说自己的. (一)数据库的设计 其实虽然说是数据库的 ...

  7. 洛谷2387 BZOJ3669魔法森林题解

    题目链接 BZ链接 这道题被很多人用spfa水了过去,表示很... 其实spfa很好卡,这组数据可以卡掉大多数spfa 链接:密码:rjvk 这里讲一下LCT的做法 我们按照a将边排序,然后依次添加 ...

  8. JQ取消hover事件

    $('a').unbind('mouseenter').unbind('mouseleave');

  9. SpringBoot @Transactional的rollbackFor属性

    1.简单回顾Java Exception 该图摘自:https://blog.csdn.net/zhangerqing/article/details/8248186 一方面,我们可以将异常分为运行时 ...

  10. oracle函数 VARIANCE([distinct|all]x)

    [功能]统计数据表选中行x列的方差. [参数]all表示对所有的值求方差,distinct只对不同的值求方差,默认为all 如果有参数distinct或all,需有空格与x(列)隔开. [参数]x,只 ...