美文网首页
vue路由传参

vue路由传参

作者: 王哈哈wl | 来源:发表于2018-07-17 14:24 被阅读0次

    方案一:直接调用$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

    相关文章

      网友评论

          本文标题:vue路由传参

          本文链接:https://www.haomeiwen.com/subject/dqowpftx.html