25
2020
08

vue传参

1、直接调用$router.push()进行传参


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

        this.$router.push({

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

        })

在子组件中可以使用来获取传递的参数值


this.$route.params.id

2、router-link进行传参


父组件中:使用<router-link to="/需要跳转的路由路径/需要传递的参数"></router-link>标签进行导航


<router-link to="/child/123"></router-link>

子组件中:使用this.$route.params.id来接收路由参数


this.$route.params.id

3、通过路由属性中的name属性来确定匹配路由,通过params来传递参数


this.$router.push({

    name: '/describe',

    params: {

      id: id

    }

  })

对应路由配置


{

   path: '/describe',

   name: 'Describe',

   component: Describe

 }

子组件接收参数


this.$route.params.id

4、通过路由属性中的path属性来确定匹配路由,通过query来传递参数


this.$router.push({

    path: '/describe',

    query: {

      id: id

    }

  })

对应路由配置


{

   path: '/describe',

   name: 'Describe',

   component: Describe

 }

子组件接收参数


this.$route.query.id

注意:

接收参数时,是this.$route,不是this.$router

« 上一篇 下一篇 »

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。