一、get方式(url传参):

1.动态路由传参:
父组件:

  1. selectItem (item) {
  2. this.$router.push({
  3. path: `/recommend/${item.id}`
  4. })
  5. }

router.js:

  1. {
  2. path: '/recommend',
  3. component: Recommend,
  4. children: [
  5. {
  6. path: ':id', // 【或者/recommend/:id】
  7. component: Disc
  8. }
  9. ]
  10. },

子组件:

  1. this.$route.params

2.静态路由传参:
父组件:

  1. selectItem (item) {
  2. this.$router.push({
  3. path: '/recommend/disc',
  4. query: {
  5. id: item.dissid
  6. }
  7. })
  8. },

router.js:

  1. {
  2. path: '/recommend',
  3. component: Recommend,
  4. children: [
  5. {
  6. path: 'disc', // 【或者/recommend/disc】
  7. component: Disc
  8. }
  9. ]
  10. },

子组件:

  1. this.$route.query

二、post方式传参:

这种方式是匹配name传参:

父组件:

  1. selectItem (item) {
  2. this.$router.push({
  3. name: `disc`, //这里的name对应router.js中的name 【必填】
  4. params: {
  5. id: item.id // 【或者/recommend/disc】
  6. }
  7. })

router.js:

  1. {
  2. path: '/recommend',
  3. name: 'recommend',
  4. component: Recommend,
  5. children: [
  6. {
  7. path: '/recommend/disc',
  8. name: 'disc',
  9. component: Disc
  10. }
  11. ]
  12. }

子组件:

  1. created () {
  2. console.log(this.$route.params) //访问参数
  3. }

总结:

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父子组件路由传参的方式的更多相关文章

  1. vue 父子组件相互传参

    转自https://blog.csdn.net/u011175079/article/details/79161029 子组件: <template> <div> <di ...

  2. vue 父子组件之间传参

    父组件中有子组件 msg 为父组件向子组件传的内容,  子组件向父组件传参数 子组件:this.$emit("shownumber",[this.num]);//this.$emi ...

  3. Vue的组件及传参

    目录 Vue的组件及传参 Vue组件的概念 根组件 子组件(局部组件) 父组件向子组件传值 子组件向父组件传值 Vue的组件及传参 Vue组件的概念 我们首先要知道组件的概念,实际上每一个组件都是一个 ...

  4. vue父子组件状态同步的最佳方式续章(v-model篇)

    大家好!我是木瓜太香!一名前端工程师,之前写过一篇<vue父子组件状态同步的最佳方式>,这篇文章描述了大多数情况下的父子组件同步的最佳方式,也是被开源中国官方推荐了,在这里表示感谢! 这次 ...

  5. react router @4 和 vue路由 详解(六)vue怎么通过路由传参?

    完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 8.vue怎么通过路由传参? a.通配符传参数 //在定义路由的时候 { path: ' ...

  6. vue中的路由传参及跨组件传参

    路由跳转   this.$router.push('/course'); this.$router.push({name: course}); this.$router.go(-1); this.$r ...

  7. vue非父子组件间传参问题

    最近在使用vue进行开发,遇到了组件之间传参的问题,此处主要是针对非父子组件之间的传参问题进行总结,方法如下:一.如果两个组件用友共同的父组件,即 FatherComponent.vue代码 < ...

  8. 前台VUE的组件之间传参方式

    路由传参 """ 转跳: <router-link :to="'/course/'+course.id">{{course.name}}& ...

  9. vue中路由传参的方式

    一.params的类型: 配置路由格式: /router/:id 传递的方式: 在path后面跟上对应的值 传递后形成的路径: /router/123, /router/abc 通过:to字符串拼接的 ...

随机推荐

  1. 【Java线程】锁机制:synchronized、Lock、Condition(转)

    原文地址 1.synchronized 把代码块声明为 synchronized,有两个重要后果,通常是指该代码具有 原子性(atomicity)和 可见性(visibility). 1.1 原子性 ...

  2. CodeIgniter底层数据库类继承关系

    1.CI_DB_mysql_driver 继承 CI_DB,  CI_DB这个类是不存在的,每次调用文件中~/CodeIgniter_2.1.3/system/database/DB.php函数&am ...

  3. 使用 Spring 容器管理 Filter

    当我们用Filter时,往往需要使用一些辅助的service,在普通的java中,只要声明(set,get方法)后在spring-application配置文件中配置就可以了,但是由于Filter与L ...

  4. VMware和Centos系统安装

    1.Linux发行版的选择 2.vmware创建一个虚拟机(centos) 3.安装配置centos7 4.xshell配置连接虚拟机(centos) 选择性 pc可以选择 -纯系统 Linux/wi ...

  5. MVC+Ext.net零基础学习记录(四)

    在上一篇文章[MVC+Ext.net零基础学习记录(三)]中提到了利用MVC的Area可以做到项目分离,但是实际操作起来还是有很多问题的.比如,对于物理资源的访问,会报:没有相关资源 开始的时候,我在 ...

  6. hihocoder hiho第38周: 二分·二分答案 (二分搜索算法应用:二分搜索值+bfs判断可行性 )

    题目1 : 二分·二分答案 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 在上一回和上上回里我们知道Nettle在玩<艦これ>,Nettle在整理好舰队之后 ...

  7. Spring当中的名称装配和类型装配有什么区别?

    6 人赞同了该回答 Spring auto-wire的 五种方式:1:no 默认的方式是不进行自动装配,通过手工设置ref 属性来进行装配bean2:byName 通过参数名 自动装配,如果一个bea ...

  8. Spring Boot2.0之 jar打包方式

    Jar类型打包方式 1.使用mvn celan  package 打包 2.使用java –jar 包名 war类型打包方式 1.使用mvn celan package 打包 2.使用java –ja ...

  9. 基于对话框的Opengl框架

    转自:http://blog.csdn.net/longxiaoshi/article/details/8238933 12-11-29 14:55 1198人阅读 评论(6) 收藏 举报  分类: ...

  10. Python成长之路第一篇(2)__初识列表和元组

    可以将列表和元组当成普通的“数组”,他能保存任意数量任意类型的Python对象,和数组一样都是通过数字0索引访问元素,列表和元组可以存储不同类型的对象,列表和元组有几处重要区别.列表元素用([])包括 ...