父子间的组件通讯是通过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. HttpOperater

    using System; using System.IO; using System.Linq; using System.Net; using System.Text; using System. ...

  2. Rust 1.7.0 处理命令行參数

    std是 Rust 标准函数库: env 模块提供了处理环境函数. 在使用标准函数库的时候,使用 use 导入对应的 module . 一.直接输出 use std::env; fn main(){ ...

  3. SCUT入门-协议生成器配置

    协议生成器需要放在IIS里才能正常使用.具体目录在:Scut\Source\Tools\ContractTools\release 关于具体细节看这篇:https://github.com/ScutG ...

  4. Atitit.注重细节还是关注长远??长远优先

    Atitit.注重细节还是关注长远??长远优先 1. 注重细节的误区 1 1.1. 如果连aaa都做不好,那么怎么能够相信你ccc 2 1.2. 一屋不扫何以扫天下??但是扫大街的都是保洁员 2 2. ...

  5. atitit.安全的签名摘要 算法attilax总结

    atitit.安全的签名 算法attilax总结 1. MD5 (不推荐)结果是128位二进制,只有转为16进制字符串是32位 1 2. 使用sha1算法加密后的密串长度有40位,相对更安全一些.Sh ...

  6. location 设定某个文件的过期时间,并不记录访问日志

    网页的根目录本来是: 6 root /app/www/default; [root@web01 default]# cat /app/server/nginx/conf/vhosts/default. ...

  7. 折腾kali linux2.0

    偶然的机会了解到了kali linux这个用于渗透测试的linux发行版,于是就从官网下了iso,但是制作启动盘老出错.网上查了下说在linux下用dd命令特别简单,于是转到ubuntu下制作启动盘, ...

  8. pip install read time-out

    Problem ReadTimeoutError: HTTPSConnectionPool(host='pypi.python.org', port=443): Read timed out. 1 S ...

  9. 用分立元件实现串口通讯TTL/RS232电平转换

    1.计算机串口通信的RS-232电平:用正负电压来表示逻辑状态.逻辑1= = -3V--15V,逻辑0=+3-+15V. 2.单片机串口通信的TTL电平:输出高电平>2.4V,输出低电平< ...

  10. 打开palette面板