vue的路由跳转及传参(编程式导航)

1）直接在路由中传参

   this.$router.push({ path: `/childPage/${id}`, })

    需要对应路由配置如下：

 

   {
     path: '/childPage/:id',
     name: 'childPage',
     component: childPage
   }
childPage
childPage
childPage

获取参数：this.$route.parames.id

2) 通过路由属性中的name来确定匹配的路由，通过params来传递参数

　　 this.$router.push({ name: 'childPage', params: { id: id } })

　　  需要对应路由配置如下：

　　　　{

      path: '/childPage',

      name: 'childPage',

      component: childPage

     }

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

　　　　this.$router.push({ path: '/childPage', query: { id: id } })

　　　　 需要对应路由配置如下：

　　　　　　 {

         path: '/childPage',

         name: 'childPage',

         component: childPage

       }

　　获取参数：this.$route.query.id

 

 

 

参考：https://segmentfault.com/a/1190000012393587?utm_source=tag-newest☺