需求:

从 任务列表进入 任务详情 ,向详情页传递当前 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. initwithcoder和 initwithframe 区别?

    每个ios开发者对loadView和viewDidLoad肯定都很熟悉,虽然这两个函数使用上真的是非常简单,但是和类似的initWithNibName/awakeFromNib/initWithCod ...

  2. Java练习 SDUT-2787_加密术

    加密术 Time Limit: 1000 ms Memory Limit: 65536 KiB Problem Description 加密技术是一种常用的安全保密手段,利用加密技术可以把重要的数据变 ...

  3. 2013年山东省第四届ACM大学生程序设计竞赛J题:Contest Print Server

    题目描述     In ACM/ICPC on-site contests ,3 students share 1 computer,so you can print your source code ...

  4. AT2346 No Need

    atcoder上的题目 链接 一道思维题目 可以发现如果X是可有可无的,那么所有小于X的数也一定是可有可无的, 所有我们只要找出最大的那个可有可无的数字就好了 进一步分析,发现 若A1, A2, . ...

  5. phpexcel使用说明3

    下面是总结的几个使用方法 include 'PHPExcel.php'; include 'PHPExcel/Writer/Excel2007.php'; //或者include 'PHPExcel/ ...

  6. ssh scp nc

    ssh远程连接 ssh root@192.168.111.11 scp数据传输,(secure copy) 1.下载.拉取 scp root@192.168.111.11:/root/database ...

  7. 容器化ICT融合初体验

    [编者的话]本次将分享的容器化ICT融合平台是一种面向未来ICT系统的新型云计算PaaS平台,它基于容器这一轻量级的虚拟化技术以及自动化的"微服务"管理架构,能够有效支撑应用快速上 ...

  8. OpenStack宣布用Kubernetes重写底层编排引擎

    Mirantis是OpenStack的主要贡献者,今天他宣布将使用Kubernetes作为底层编排引擎重写其私有云平台.我们认为这是推进OpenStack和Kubernetes 社区伟大的一步. Op ...

  9. AutoCAD安装失败怎样卸载重新安装AutoCAD,解决AutoCAD安装失败的方法总结

    技术帖:AutoCAD没有按照正确方式卸载,导致AutoCAD安装失败.楼主也查过网上关于如何解决AutoCAD安装失败的一些文章,是说删除几个AutoCAD文件和AutoCAD软件注册表就可以解决A ...

  10. Java练习 SDUT-1132_斐波那契数列

    C/C++经典程序训练2---斐波那契数列 Time Limit: 1000 ms Memory Limit: 65536 KiB Problem Description 编写计算斐波那契(Fibon ...