父子间的组件通讯是通过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. Redis总结(四)Redis 的持久化(转载)

    前面已经总结了Redis 的安装和使用今天讲下Redis 的持久化. redis跟memcached类似,都是内存数据库,不过redis支持数据持久化,也就是说redis可以将内存中的数据同步到磁盘来 ...

  2. express@4.0.*

    $ sudo npm install -g express the installation goes fine. But when I try to create a project with ex ...

  3. 【HDU 2586】LCA模板

    在一棵树上 求2个点的最短距离.那么首先利用LCA找到2个点的近期公共祖先 公式:ans = dis(x) + dis(y) - 2 * dis(lca(x,y)) 这里的dis(x)指的上x距离根节 ...

  4. Atitit.异步编程 java .net php python js 的比较

    Atitit.异步编程 java .net php python js 的比较 1. 1.异步任务,异步模式,  APM模式,,  EAP模式, TAP 1 1.1.       APM模式: Beg ...

  5. hdu 4217Data Structure?

    树状数组+二分 就是找第几小的数,,找几次,再求和. . #include<cstdio> #include<cstring> #include<iostream> ...

  6. Python|PyCharm安装scrapy包

    [转]http://www.cnblogs.com/xiaoli2018/p/4566639.html

  7. 解决The markup in the document following the root element must be well-formed.

    出现问题的代码: <security-constraint> <web-resource-collection> <web-resource-name>Regist ...

  8. sql 记录

    INSERT INTO B([name],[info]) SELECT [name,'10'] FROM A 级联更新1:update tb1, tb2 set tb1.a=tb2.a,tb1.b=t ...

  9. word字号

    1 大特号 63 2 特 号 54 3 初 号 42 4 小初号 36 5 大一号 31.5 6 一 号 28 7 小一号 24 8 二 号 21 9 小二号 18 10 三 号 16 11 小三号  ...

  10. scp采用无密码在两台linux服务器之间传输数据

    一.root用户: 1. 在主机A上执行如下命令来生成配对密钥: ssh-keygen -t rsa 按照提示操作,注意,不要输入passphrase.提示信息如下 Generating public ...