Vue路由传参的3种方式

Vue路由传参的几种方式

例如: 传一个id=123

1.直接拼上(本质params方式?)

配置:routes:[{path: “/user/:id”, component: User}]

跳转:this.$router.push({“/user/123}”}) //当然动态的话写成/user/${id}

取id:this.$route.params.id

url显示: /user/123

2.params传参

配置:routes:[{path:”/user”, name:”user”, component: User}]

跳转:this.$router. push ({name:”user”, params: {id:123}})

取id:this.$route.params.id

url显示: /user/123

注:此种方式下刷新页面会丢失参数,解决方法为同方法一配置路由时path加上:id(官方),或者传入不同参数时使用计算属性(未验证)

3.query传参

配置:routes:[{path: “/user/:id”name:”user”, component: User}]

跳转:this.$router. push ({path:”/user”, query: {id:123}})

取到:this.$route.query.id

url显示: /user?id=123

总结:params需配合name, query配合path