vue父子组件路由传参的方式
一、get方式(url传参):
1.动态路由传参:
父组件:
selectItem (item) {
this.$router.push({
path: `/recommend/${item.id}`
})
}
router.js:
{
path: '/recommend',
component: Recommend,
children: [
{
path: ':id', // 【或者/recommend/:id】
component: Disc
}
]
},
子组件:
this.$route.params
2.静态路由传参:
父组件:
selectItem (item) {
this.$router.push({
path: '/recommend/disc',
query: {
id: item.dissid
}
})
},
router.js:
{
path: '/recommend',
component: Recommend,
children: [
{
path: 'disc', // 【或者/recommend/disc】
component: Disc
}
]
},
子组件:
this.$route.query
二、post方式传参:
这种方式是匹配name
传参:
父组件:
selectItem (item) {
this.$router.push({
name: `disc`, //这里的name对应router.js中的name 【必填】
params: {
id: item.id // 【或者/recommend/disc】
}
})
router.js:
{
path: '/recommend',
name: 'recommend',
component: Recommend,
children: [
{
path: '/recommend/disc',
name: 'disc',
component: Disc
}
]
}
子组件:
created () {
console.log(this.$route.params) //访问参数
}
总结:
post
方式传参是匹配name
进行路由,使用this.$route.params
获取;
get
方式是匹配path
,分为静态路由
和动态路由
2种。
动态路由: 使用params
传参,this.$router.params
获取;参数在路由中
静态路由: 使用query
传参,this.$router.query
获取;参数在参数中
在router.js
中子路由的path
有2中方式书写:全路径:/recommend/disc
或者 短路径:disc
;
参考文章:https://segmentfault.com/a/1190000012393587
vue父子组件路由传参的方式的更多相关文章
- vue 父子组件相互传参
转自https://blog.csdn.net/u011175079/article/details/79161029 子组件: <template> <div> <di ...
- vue 父子组件之间传参
父组件中有子组件 msg 为父组件向子组件传的内容, 子组件向父组件传参数 子组件:this.$emit("shownumber",[this.num]);//this.$emi ...
- Vue的组件及传参
目录 Vue的组件及传参 Vue组件的概念 根组件 子组件(局部组件) 父组件向子组件传值 子组件向父组件传值 Vue的组件及传参 Vue组件的概念 我们首先要知道组件的概念,实际上每一个组件都是一个 ...
- vue父子组件状态同步的最佳方式续章(v-model篇)
大家好!我是木瓜太香!一名前端工程师,之前写过一篇<vue父子组件状态同步的最佳方式>,这篇文章描述了大多数情况下的父子组件同步的最佳方式,也是被开源中国官方推荐了,在这里表示感谢! 这次 ...
- react router @4 和 vue路由 详解(六)vue怎么通过路由传参?
完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 8.vue怎么通过路由传参? a.通配符传参数 //在定义路由的时候 { path: ' ...
- vue中的路由传参及跨组件传参
路由跳转 this.$router.push('/course'); this.$router.push({name: course}); this.$router.go(-1); this.$r ...
- vue非父子组件间传参问题
最近在使用vue进行开发,遇到了组件之间传参的问题,此处主要是针对非父子组件之间的传参问题进行总结,方法如下:一.如果两个组件用友共同的父组件,即 FatherComponent.vue代码 < ...
- 前台VUE的组件之间传参方式
路由传参 """ 转跳: <router-link :to="'/course/'+course.id">{{course.name}}& ...
- vue中路由传参的方式
一.params的类型: 配置路由格式: /router/:id 传递的方式: 在path后面跟上对应的值 传递后形成的路径: /router/123, /router/abc 通过:to字符串拼接的 ...
随机推荐
- 【Java线程】锁机制:synchronized、Lock、Condition(转)
原文地址 1.synchronized 把代码块声明为 synchronized,有两个重要后果,通常是指该代码具有 原子性(atomicity)和 可见性(visibility). 1.1 原子性 ...
- CodeIgniter底层数据库类继承关系
1.CI_DB_mysql_driver 继承 CI_DB, CI_DB这个类是不存在的,每次调用文件中~/CodeIgniter_2.1.3/system/database/DB.php函数&am ...
- 使用 Spring 容器管理 Filter
当我们用Filter时,往往需要使用一些辅助的service,在普通的java中,只要声明(set,get方法)后在spring-application配置文件中配置就可以了,但是由于Filter与L ...
- VMware和Centos系统安装
1.Linux发行版的选择 2.vmware创建一个虚拟机(centos) 3.安装配置centos7 4.xshell配置连接虚拟机(centos) 选择性 pc可以选择 -纯系统 Linux/wi ...
- MVC+Ext.net零基础学习记录(四)
在上一篇文章[MVC+Ext.net零基础学习记录(三)]中提到了利用MVC的Area可以做到项目分离,但是实际操作起来还是有很多问题的.比如,对于物理资源的访问,会报:没有相关资源 开始的时候,我在 ...
- hihocoder hiho第38周: 二分·二分答案 (二分搜索算法应用:二分搜索值+bfs判断可行性 )
题目1 : 二分·二分答案 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 在上一回和上上回里我们知道Nettle在玩<艦これ>,Nettle在整理好舰队之后 ...
- Spring当中的名称装配和类型装配有什么区别?
6 人赞同了该回答 Spring auto-wire的 五种方式:1:no 默认的方式是不进行自动装配,通过手工设置ref 属性来进行装配bean2:byName 通过参数名 自动装配,如果一个bea ...
- Spring Boot2.0之 jar打包方式
Jar类型打包方式 1.使用mvn celan package 打包 2.使用java –jar 包名 war类型打包方式 1.使用mvn celan package 打包 2.使用java –ja ...
- 基于对话框的Opengl框架
转自:http://blog.csdn.net/longxiaoshi/article/details/8238933 12-11-29 14:55 1198人阅读 评论(6) 收藏 举报 分类: ...
- Python成长之路第一篇(2)__初识列表和元组
可以将列表和元组当成普通的“数组”,他能保存任意数量任意类型的Python对象,和数组一样都是通过数字0索引访问元素,列表和元组可以存储不同类型的对象,列表和元组有几处重要区别.列表元素用([])包括 ...