父子间的组件通讯是通过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. JavaScript编码转换之gb2312转unicode -- &#X形式

    http://www.cnblogs.com/meil/archive/2007/01/31/635936.html JavaScript编码转换之gb2312转unicode     1. < ...

  2. Linux命令-文件搜索命令:grep

    选项: -A 数字:表示查看满足条件行后的N条记录 -B 数字:表示查看满足条件行前的N条记录 -C 数字:表示查看满足条件行前后各N条记录 more /etc/inittab 分页查看inittab ...

  3. MFC总结之CListCtrl用法及技巧(二)

    续第一篇:MFC总结之CListCtrl用法及技巧(一) http://blog.csdn.net/zwgdft/article/details/7560592 本篇重点介绍:禁止拖动表头.让第一列居 ...

  4. Jquery实现无刷新DropDownList联动

    <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> &l ...

  5. CakePHP不支持path/to路径,前后台无法方法

    本来想把前后台分离,可是阅读了cakephp的说明,才发现.cakephp根本就不支持path/to路径. cakephp官网给出的 管理员分离方式:http://book.cakephp.org/2 ...

  6. firefox因 HTTP 严格传输安全(HSTS)机制无法打开网页

    1.打开about:config 2.查找: security.enterprise_roots.enabled ,默认为false,改为true就可以了 3.吐槽,firefox太极端了,这是作死.

  7. ubuntu apt-get方式安装与卸载

    在ubuntu终端中安装软件: 安装软件 apt-get install softname1 softname2 softname3……卸载软件 apt-get remove softname1 so ...

  8. floyd算法&迪杰斯特拉算法

    ; k<=n; k++) ; i<=n; i++) ; j<=n; j++) { gra[i][j]=min(gra[i][j],gra[i][k]+gra[k][j]); } vo ...

  9. Android——问题解决之adb not responding;adb不是内部或外部命令;path变量的默认值为多少

    adb not responding 恩,这是出现的问题.我们开始来解决它吧! 出现这种问题大多是因为adb端口被占用导致这个问题,所以只要找到占用端口号程序,结束即可!就是这么简单(adb运行端口号 ...

  10. Ajax的两个用法

    1.实现的效果是:通过一个函数,里面调用Ajax,函数的返回值是Ajax成功调用之后得到的返回值. 用jQuery进行简单的演示: function getRobotInfo(id) { var ip ...