zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    【整理】Linux 下 自己使用的 debug宏 printf
    STM32学习笔记:创建标准库工程模板
    【闲谈】第一份实习(下)
    Ceres-Solver库入门
    ceres-solver库使用示例
    ceres-solver库编译说明
    October 23, 2013
    Pollution over East China : Image of the Day
    谈谈PCI的GXL
    InfoQ访谈:Webkit和HTML5的现状和趋势
  • 原文地址:https://www.cnblogs.com/wenwenwei/p/10017848.html
Copyright © 2011-2022 走看看