vue路由传参

方案一:直接调用$router.push 实现携带参数的跳转

  this.$router.push({

      path: `/describe/${id}`,

    })

路由配置:

{

    path: '/describe/:id',

    name: 'Describe',

    component: Describe

  }

子组件获取参数:$route.params.id

方案二:通过路由属性中的name来确定匹配的路由,通过params来传递参数

this.$router.push({

          name: 'Describe',

          params: {

            id: id

          }

        })

对应路由配置:

{

    path: '/describe',

    name: 'Describe',

    component: Describe

  }

子组件获取参数:$route.params.id

方案三:使用path来匹配路由,然后通过query来传递参数

这种情况下 query传递的参数会显示在url后面?id=?

this.$router.push({

          path: '/describe',

          query: {

            id: id

          }

        })

对应路由配置:

{

    path: '/describe',

    name: 'Describe',

    component: Describe

  }

子组件接收参数:$route.query.id

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容