vue向路由组件传递props
父子间的组件通讯是通过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的更多相关文章
- Vue 给子组件传递参数
Vue 给子组件传递参数 首先看个例子吧 原文 html <div class="container" id="app"> <div clas ...
- vue_VueRouter 路由_路由器管理n个路由_并向路由组件传递数据_新标签路由_编程式路由导航
路由:就是一个 key 与 value 的映射关系.key 就是 pathh 前台路由的 value 是 Component 组件对象 后台路由的 value 是一个 回调函数 普通链接: 会发送请求 ...
- vue的通讯与传递props emit (简单的弹框组件)
props父把信息传递给子组件 1父组件 <template> <div class="hello"> <div id="app-3&quo ...
- vue嵌套路由-query传递参数(三)
在嵌套路由中我们经常会遇到父路由向子路由里面传递参数,传递参数有两种方法,通过 query 或者 params index.html <div id="app"> &l ...
- vue.js 父子组件间 props 数据同步处理
常见的场景: 在一个vue组件A中,使用另外一个组件B.A将自己的数据通过B组件的Props属性(propX)传递到B组件实例内部,B组件内部会修改该Props属性(propX)的值,此时在A组件内部 ...
- vue中父组件使用props或者$attras向子组件中传值
知识点:vue中使用props或者$attras向子组件中传值 (1) props传值 子组件必须注册好要传的数据() props:['id'] (2)$attrs传值 该数据在props中,没有注册 ...
- vue 父子父组件通过props传父页面请求后的数据
父子父组件通过props传父页面请求后的数据,则在父页面的子组件上加上判断数据是否存在即可,如下 <gl-line-bar v-if="oneWeekBetEcharts" ...
- 详解vue父组件传递props异步数据到子组件的问题
案例一 父组件parent.vue // asyncData为异步获取的数据,想传递给子组件使用 <template> <div> 父组件 <child :child-d ...
- [转]详解vue父组件传递props异步数据到子组件的问题
原文地址:https://www.cnblogs.com/goloving/p/9114389.html 案例一 父组件parent.vue // asyncData为异步获取的数据,想传递给子组件使 ...
随机推荐
- JavaScript编码转换之gb2312转unicode -- &#X形式
http://www.cnblogs.com/meil/archive/2007/01/31/635936.html JavaScript编码转换之gb2312转unicode 1. < ...
- Linux命令-文件搜索命令:grep
选项: -A 数字:表示查看满足条件行后的N条记录 -B 数字:表示查看满足条件行前的N条记录 -C 数字:表示查看满足条件行前后各N条记录 more /etc/inittab 分页查看inittab ...
- MFC总结之CListCtrl用法及技巧(二)
续第一篇:MFC总结之CListCtrl用法及技巧(一) http://blog.csdn.net/zwgdft/article/details/7560592 本篇重点介绍:禁止拖动表头.让第一列居 ...
- Jquery实现无刷新DropDownList联动
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> &l ...
- CakePHP不支持path/to路径,前后台无法方法
本来想把前后台分离,可是阅读了cakephp的说明,才发现.cakephp根本就不支持path/to路径. cakephp官网给出的 管理员分离方式:http://book.cakephp.org/2 ...
- firefox因 HTTP 严格传输安全(HSTS)机制无法打开网页
1.打开about:config 2.查找: security.enterprise_roots.enabled ,默认为false,改为true就可以了 3.吐槽,firefox太极端了,这是作死.
- ubuntu apt-get方式安装与卸载
在ubuntu终端中安装软件: 安装软件 apt-get install softname1 softname2 softname3……卸载软件 apt-get remove softname1 so ...
- floyd算法&迪杰斯特拉算法
; k<=n; k++) ; i<=n; i++) ; j<=n; j++) { gra[i][j]=min(gra[i][j],gra[i][k]+gra[k][j]); } vo ...
- Android——问题解决之adb not responding;adb不是内部或外部命令;path变量的默认值为多少
adb not responding 恩,这是出现的问题.我们开始来解决它吧! 出现这种问题大多是因为adb端口被占用导致这个问题,所以只要找到占用端口号程序,结束即可!就是这么简单(adb运行端口号 ...
- Ajax的两个用法
1.实现的效果是:通过一个函数,里面调用Ajax,函数的返回值是Ajax成功调用之后得到的返回值. 用jQuery进行简单的演示: function getRobotInfo(id) { var ip ...