父子间的组件通讯是通过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. 转:Mosquitto用户认证配置

    转自:https://blog.csdn.net/u012377333/article/details/69397124?utm_source=blogxgwz1 前言:基于Mosquitto服务器已 ...

  2. c#(winform)中自定义ListItem类方便ComboBox添加Item项

    1.定义ListItem类 public class ListItem { private string _key = string.Empty; private string _value = st ...

  3. jdbc链接基础

    1 jdbc 链接两种方式,通过jdbc链接mysql数据库,url:jdbc:mysql://ip:端口[/database name] 通过什么驱动器,链接什么数据库,数据库的ip,连接端口,可以 ...

  4. CentOS-6.5下安装navicat for mysql

    一.安装前准备 安装epel源        安装wine        如果不安装wine,则可能会出现安装完navicat for mysql后无法启动的情况. 二.安装epel源 cd /tmp ...

  5. php调试函数

    void debug_print_backtrace ([ int $options = 0 [, int $limit = 0 ]] ) array debug_backtrace ([ int $ ...

  6. Atitit. 构造ast 语法树的总结attilax oao

    Atitit. 构造ast 语法树的总结attilax oao 1. 能那更加有意义的名字来命名ast节点... 1 2. 如何命名表达式名称..使用实际对象名称,而不是操作符号表达式更好 1 2.1 ...

  7. SPD

    一般是在内存条上的.1.SPD是SERIAL PRESENCE DETECT的缩写,中文意思是模组存在的串行检测.也即是通过上面讲的IIC串行接口的EEPROM对内存插槽中的模组存在的信息检查.这样的 ...

  8. 0062 Spring MVC的文件上传与下载--MultipartFile--ResponseEntity

    文件上传功能在网页中见的太多了,比如上传照片作为头像.上传Excel文档导入数据等 先写个上传文件的html <!DOCTYPE html> <html> <head&g ...

  9. 记一次log4j日志导致线上OOM问题案例

    最近一个服务突然出现 OutOfMemoryError,两台服务因为这个原因挂掉了,一直在full gc.还因为这个问题我们小组吃了一个线上故障.很是纳闷,一直运行的好好的,怎么突然就不行了呢... ...

  10. 高效学习Oracle的方法论

    Oracle的很多经验并不是来自工业环境.很多问题和经验都可以从自己的测试里积累        实验要做,但也要想!        那思维的起点是什么?        以下是我的看法.或者有些不合理: ...