vue使用路由进行页面跳转时传递参数

2019-12-10    前端达人

一. 通过router-link进行跳转

<router-link

:to="{

path: 'yourPath',

    params: {

    name: 'name',

        dataObj: data

},

query: {

    name: 'name',

        dataObj: data

}

}">

</router-link>

二. 通过编程导航 $router进行路由跳转

1.路径后拼接参数

通过路径后直接拼接来传递参数



getDescribe(id) {

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

        this.$router.push({

          path: /describe/${id},

        })



对应路由配置

注意:此方法需要修改对应路由配置,需要在path中添加/:id来对应 $router.push 中path携带的参数。



 {

     path: '/describe/:id',

     name: 'Describe',

     component: Describe

   }



获取传递的参数值



this.$route.params.id

  1. 通过params来传递参数

    传递参数

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



     this.$router.push({

              name: 'Describe',

              params: {

                id: id

              }

            })



    对应路由配置

    注意这里不能使用:/id来传递参数了,因为已经使用params来携带参数了。



    {

         path: '/describe',

         name: 'Describe',

         component: Describe

       }



    获取参数



    this.$route.params.id

    1
  2. 通过query来传递参数

    传递参数

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

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



    this.$router.push({

              path: '/describe',

              query: {

                id: id

              }

            })



    对应路由配置



     {

         path: '/describe',

         name: 'Describe',

         component: Describe

       }



    获取参数



    this.$route.query.id




分享本文至:

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档