vue2路由传参_vue2路由跳转传参

一、vue2路由传参分为三种

        a、query

        b、params

        c、动态路由传参

A、query传参 

在跳转组件中使用 this.$router.push({    path:"/about", query:{id}    }) 、

                              this.$router.push({    name:"about", query:{id}    })、 

                              this.$router.push('/about?name='+obj.name+'&age='+obj.age)

                              传递参数

在目标组件使用 this.$route.query.id来接收参数

注意点：query传参 可以使用 path 也可以使用 name ；参数会在 url 中显示、刷新页面数据不会丢失

B、params传参

在跳转组件中使用 this.$router.push({    name:"about", params:{id}   })  传递参数

在目标组件使用 this.$route.params.id 来接收参数

注意点：params传参 只能使用 name ；参数不会在 url 中显示、刷新页面数据会丢失

C、动态路由传参

在跳转组件中使用 this.$router.push('/about/'+obj.name+'/'+obj.age)

在目标组件使用 this.$route.params

注意点： 动态路由传参需要对路由进行配置 ；参数会在 url 中显示、刷新页面数据不会丢失    

 如： { path: '/about/:name/:age' ,  name: 'About', component()=>import('../views/About.vue') }

   

   

 

 

          ​​​​​​​        ​​​​​​​        ​​​​​​​        ​​​​​​​       

                                                       

                ​​​​​​​        ​​​​​​​        ​​​​​​​        ​​​​​​​