父子间的组件通讯是通过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. J2ME项目移植到Android平台六大注意事项

    很多J2ME项目如何移植到Android平台呢?Java虽然号称是跨平台应用但是目前的移植问题还是比较严重的,不知道未来Sun推出JavaFx或F3时会出现什么问题,如何从J2ME移植到Android ...

  2. maven optional可选依赖

    应用场景:projectA 依赖projectB,  projectB 依赖projectC时 <dependency> <groupId>com.itear.projectC ...

  3. location 将多级目录下的文件转成一个文件

    /ck-135-201-7142.html 指向/ck/135/201/7142.html [root@web01 www]# cat /app/server/nginx/conf/rewrite/d ...

  4. Building and running Node.js for Android

    转自: http://www.goland.org/nodejsonandroid/ Building and running Node.js for Android October 14, 2014 ...

  5. Struts2使用OGNL遍历各种map总结

    一.Action中的代码:MapAction.java package com.zx.demo.action; import java.util.ArrayList;   import java.ut ...

  6. Cocos2d-x 3.4 初体验——安装教程

    电脑系统window7 32位 1.首先从官网下载cocos2d-x并解压 http://cn.cocos2d-x.org/download/ 解压后的文件夹中有一个setup.py,双击运行.需要安 ...

  7. A+P+M+W

    安装之前先做个目录的安排, D盘根目录建立”Dev”文件夹,在文件夹下建立: Php Apache Mysql 三个文件夹 所需软件: 0.    安装Apache的前必须安装VC11 vcredis ...

  8. django 文件上传(阿里云oss)下载(支持大文件下载)

    1.文件上传 Models 设计 class Upload_File(models.Model): image = models.FileField(upload_to='file/%Y/%m',de ...

  9. hive 中与mysql 中函数同名不同意的方法记录

    max 函数 在hive中max函数是一个聚合函数,所以,而且返回值是double ,而且后面必须跟group by ,这个和mysql差异很大 Built-in Aggregate Function ...

  10. Unix系统编程()复制文件描述符

    Bourne shell的IO重定向语法2>&1,意在通知shell把标准错误(文件描述符2)重定向到标准输出(文件描述符1).因此下列命令将把标准输出和标准错误写入result.log ...