父子间的组件通讯是通过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. Solr 4.0部署

    http://www.blogjava.net/xiaohuzi2008/archive/2012/12/03/392373.html

  2. ICSharpCode.SharpZipLib工具压缩与解压缩zip文件

    using System; using System.Collections.Generic; using System.IO; using System.Text; using ICSharpCod ...

  3. webpack One CLI for webpack must be installed. These are recommended choices, delivered as separate(webpack报错)

    用webpack 打包项目的时候:webpack js.js bundle.js 报错. 最近在安装好webpack后,使用时,提示 One CLI for webpack must be insta ...

  4. drawer navigation, tabhostFragment 默认导向

    问题: 项目结构,在一个抽屉导航中的第一个抽屉中加入了一个tabHostFragment,每次进入项目都是在抽屉导航的默认界面,须要把抽屉划出来再选择某个抽屉. 可是想让APP直接跳转到第一个抽屉界面 ...

  5. 再谈API GateWay服务网关

    前面在谈微服务架构的时候,我博客上转过Chris Richardson 微服务系列中对微服务网关的描述: 通常来说,使用 API 网关是更好的解决方式.API 网关是一个服务器,也可以说是进入系统的唯 ...

  6. 479. Second Max of Array【easy】

    Find the second max number in a given array. Notice You can assume the array contains at least two n ...

  7. jQuery 插件分享-非常优秀的tab插件tabulous- 学徒帮

    干货jquery插件分享之tab. tab 选项卡切换,在日常开发中也是一种比较常见的呈现控件,今天这个tab控件效果还是蛮喜欢的,推荐给大家有用到的场景可以试试: tabulous.js A jQu ...

  8. Windows 8.1下安装Mac OS X 10.8虚拟机

    转载自http://blog.csdn.net/jordanxinwang/article/details/43637799 1.准备 宿主操作系统:Windows 8.1 64位.特别地,需要CPU ...

  9. gpio 灯的对应关系

    1 点灯验证通过:   GPIO160     TX1-LED GPIO161     RX1-LED   GPIO163     TX2-LED GPIO164     RX2-LED   GPIO ...

  10. Python高级编程之生成器(Generator)与coroutine(一):Generator

    转载请注明出处:点我 这是一系列的文章,会从基础开始一步步的介绍Python中的Generator以及coroutine(协程)(主要是介绍coroutine),并且详细的讲述了Python中coro ...