父子间的组件通讯是通过props和$emit来实现的,那么路由之间的通讯呢,往下看:

我现在再webpack里面有一个这样的结构,

我现在想test1里面的按钮点击跳转到test2里面,获得到test1传递过来的id和age,

路由我们可以这么写:

{
path: "/test2/:id/:age",
component:test2,
// props:{id:"fang",age:18}
props:true
}

  test1.vue:

test2.vue:

效果:

本人写的比较简单一些,具体可以看一下官方的文档说明,不会的一起交流一下

vue向路由组件传递props的更多相关文章

  1. Vue 给子组件传递参数

    Vue 给子组件传递参数 首先看个例子吧 原文 html <div class="container" id="app"> <div clas ...

  2. vue_VueRouter 路由_路由器管理n个路由_并向路由组件传递数据_新标签路由_编程式路由导航

    路由:就是一个 key 与 value 的映射关系.key 就是 pathh 前台路由的 value 是 Component 组件对象 后台路由的 value 是一个 回调函数 普通链接: 会发送请求 ...

  3. vue的通讯与传递props emit (简单的弹框组件)

    props父把信息传递给子组件 1父组件 <template> <div class="hello"> <div id="app-3&quo ...

  4. vue嵌套路由-query传递参数(三)

    在嵌套路由中我们经常会遇到父路由向子路由里面传递参数,传递参数有两种方法,通过 query 或者 params index.html <div id="app"> &l ...

  5. vue.js 父子组件间 props 数据同步处理

    常见的场景: 在一个vue组件A中,使用另外一个组件B.A将自己的数据通过B组件的Props属性(propX)传递到B组件实例内部,B组件内部会修改该Props属性(propX)的值,此时在A组件内部 ...

  6. vue中父组件使用props或者$attras向子组件中传值

    知识点:vue中使用props或者$attras向子组件中传值 (1) props传值 子组件必须注册好要传的数据() props:['id'] (2)$attrs传值 该数据在props中,没有注册 ...

  7. vue 父子父组件通过props传父页面请求后的数据

    父子父组件通过props传父页面请求后的数据,则在父页面的子组件上加上判断数据是否存在即可,如下 <gl-line-bar v-if="oneWeekBetEcharts" ...

  8. 详解vue父组件传递props异步数据到子组件的问题

    案例一 父组件parent.vue // asyncData为异步获取的数据,想传递给子组件使用 <template> <div> 父组件 <child :child-d ...

  9. [转]详解vue父组件传递props异步数据到子组件的问题

    原文地址:https://www.cnblogs.com/goloving/p/9114389.html 案例一 父组件parent.vue // asyncData为异步获取的数据,想传递给子组件使 ...

随机推荐

  1. cygwin下安装scws

    安装gcc和make命令 1.找到cygwin的etc目录中有一个名为passwd的文件.   2.用UE或记事本打开passwd这个文件,找到以下部分,把其中的windows用户名admin换成ro ...

  2. 基于Bootstrap的Asp.net Mvc 分页的实现(转)

    最近写了一个mvc 的 分页,样式是基于 bootstrap 的 ,提供查询条件,不过可以自己写样式根据个人的喜好,以此分享一下.首先新建一个Mvc 项目,既然是分页就需要一些数据,我这 边是模拟了一 ...

  3. java中long型时间戳的计算

    计算时间的时候碰到的问题: Date d = new Date(); long currtime = d.getTime(); //获取当前时间 long starttime = currtime - ...

  4. 8086汇编之 CALL 和 RET指令

    Ret 和 call 也是转移指令,可是他们跟jmp不同的是,这两个转移指令都跟栈有关系. <1> ret 用栈中的数据改动IP的地址,从而实现近转移 ( ip ) = ( (ss)*16 ...

  5. Mysql使用大全 从基础到存储过程

    平常习惯了phpmyadmin等其他工具的的朋友有的根本就不会命令,如果让你笔试去面试我看你怎么办,所以,学习一下还是非常有用的,也可以知道你通过GUI工具的时候工具到底做了什么.Mysql用处很广, ...

  6. Decoration5:引入Actuator进行站点监控

    1.添加依赖 2.重启应用 3.下图显示了一些默认的监控端点 这是数据可以在前台用来做饼图和柱状图什么的,不过实际上我们现在还用不到,于是就不深入研究

  7. 超NB的WINDWS命令 当插移动硬盘时 自动弹出要格式化硬盘

    其中d表示无法识别的那个盘的盘符 移动磁盘修复成功

  8. 彻底征服 Spring AOP 之 理论篇

    基本知识 其实, 接触了这么久的 AOP, 我感觉, AOP 给人难以理解的一个关键点是它的概念比较多, 而且坑爹的是, 这些概念经过了中文翻译后, 变得面目全非, 相同的一个术语, 在不同的翻译下, ...

  9. 阿里云高速maven库

    <repository> <id>alimaven</id> <name>aliyun maven</name> <url>ht ...

  10. JSON特殊字符的处理

    本文转自:http://blog.csdn.net/btt2013/article/details/66970735 JSon 数据中的String 传递数据时,需要处理好特殊字符. JSon数据中有 ...