父子间的组件通讯是通过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. mysql拼接字符串和过滤字符的方法

    数据 id                value 1        aa<p>QL实木颗粒</p> 2        bb<p>QL实木颗粒</p> ...

  2. 实现WinForm窗体的美化(借助第三方控件)

    在winform项目中,其实皮肤就是一个第三方的控件,名字是IrisSkin4.dll只要添加到你的工具箱里就可以和其它控件一样使用了 一.添加控件IrisSkin4.dll.方法: 先把IrisSk ...

  3. C#中Out和Ref參数修饰符

    在编程过程中对于函数之间的參数的传递一般分为两种:传值和传地址. 以下为大家分析一下. 传值 比方你又一份文档,假设採用传值的话.相当于我复制了一份,因此我对我这份文档的改动都不会影响到你的那份.假设 ...

  4. C语言的工具集

    1. lint可以对c程序进行更加广泛的错误分析,lint不是缩写,它的命名是因为它像在程序中“吹毛求疵”,现在许多linux发行版都包括了它的增强版splint(Secure Programming ...

  5. 修改JQM的默认配置属性

    从本文开始,使用 jQuery Mobile 与 HTML5 开发 Web App 系列将会进入第三部分——jQuery Mobile 事件与方法,这其中将会利用之前所讲述的 jQuery Mobil ...

  6. 1、改变 vs编辑器的主题

    打开 visual studio, 在菜单栏选择  工具 -> 扩展和更新 -> 输入 “color theme” 安装完成后,选择样式. 选择好样式后, vs 立即改变主题.再次打开样式 ...

  7. MySQL 使用 SSL 连接(附 Docker 例子)

    查看是否支持 SSL 首先在 MySQL 上执行如下命令, 查询是否 MySQL 支持 SSL: mysql> SHOW VARIABLES LIKE 'have_ssl'; +-------- ...

  8. Ubuntu 安装HBase

    下载:http://mirror.bit.edu.cn/apache/hbase/stable/ 官方指南:http://abloz.com/hbase/book.html 安装配置: 解压: tar ...

  9. linux - fpga-framebuff驱动

    * linux/drivers/video/fpga_fb.c --fpga graphics adaptor frame buffer device *  Created 16 Sep2011 *  ...

  10. 高精度 - SGU 112 a^b-b^a

    a^b-b^a Problem's Link Mean: 略 analyse: 简单题,只用编个高精度乘法和减法即可. Time complexity: O(N) view code  java im ...