需求:

从 任务列表进入 任务详情 ,向详情页传递当前 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 字符串匹配算法设计

  2. Best Time to Sell and Buy Stock

    这道题想了很多,但是想多了.这个题思路很简单,如果当前值大于最小值,就计算差,和最大利润值比较. class Solution { public: int maxProfit(vector<in ...

  3. python 编码和解码

  4. HTML5入门指南

    1.HTML5到底是什么? HTML5是HTML最新的修订版本,2014年10月由万维网联盟(W3C)完成标准制定.目标是取代1999年所制定的HTML 4.01和XHTML 1.0标准,以期能在互联 ...

  5. Nuxt.js打造旅游网站第2篇_首页开发

    页面效果: 1.初始化默认布局 nuxtjs提供了一个公共布局组件layouts/default.vue,该布局组件默认作用于所有页面,所以我们可以在这里加上一些公共样式,在下一小结中还会导入公共组件 ...

  6. 关于Spring+mybatis+PageHelper分页插件PageHelper的使用策略

    把插件jar包导入项目(具体上篇有介绍http://blog.csdn.net/qq_33624284/article/details/72821811) spring-mybatis.xml文件中配 ...

  7. @gym - 101137K@ Knights of the Old Republic

    目录 @description@ @solution@ @accepted code@ @details@ @description@ 给定 N 个点 M 条边的一张图. 每个点有两个属性 Ai, B ...

  8. shell不排序去重

    一条命令搞定:   awk '!a[$0]++' file 如果是第一次出现a[$0]++的值为0(假),而!a[$0]++的值就为1(真),之后就执行print $0 第二次或者两次以上的出现a[$ ...

  9. Vue电商后台管理系统项目第1天-基本环境搭建&登录功能

    基本环境搭建完成 安装npm包:npm -S i vue vue-router axios element-ui 配置Eslint: 打开设置,搜索Eslint拓展,然后将下面代码覆盖进去即可 { , ...

  10. vbox环境搭建oracle11g RAC过程

    安装环境 主机操作系统:windows 10 虚拟机Vbox:两台Oracle Linux R6 U7 x86_64 Oracle Database software: Oracle11gR2 Clu ...