一、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

Logo

前往低代码交流专区

更多推荐