vue-router 路由动态传参 query和params的区别

vue-router 路由动态传参 query和params的区别

一、query和params的知识点理解 /data/:id这个路由匹配/data/1,/data/2这里的 id 叫 params /data?id=1 /data?id=2 这里的 id 叫 query

params方法传参的时候，要在路由后面加参数名，并且传参的时候，参数名要跟路由后面设置的参数名对应。

query方法，就没有这种限制，直接在跳转里面用就可以。

二、query和params的使用方法

使用params传参，路由配置的时候path带上参数

{ path: ‘/detail/:id/’, name: “detail”, component: detail//这个details是传进来的组件名称 }

使用： 方法1：点击按钮 方法2：this.$router.push({name:‘details’,params:{id:123}}) 页面url显示结果是：http://localhost:8081/#/details/123 params跳转方式：

写法一：this.$router.push(/detail/${this.$route.params.id})

写法二：this.$router.push({name:‘detail’,params:{id:123}})

使用query传参，路由配置的时候path不用带参数

{ path: ‘/detail’,//这里不需要参入参数，参见上面的params写法 name: “detail”, component: detail//这个details是传进来的组件名称 }

使用： 方法1：点击按钮 方法2：this.$router.push({name:‘details’,query:{id:123}})

方法3：点击按钮 方法4：this.$router.push({path:‘details’,query:{id:123}}) 页面url显示结果是：http://localhost:8081/#/details?id=123 query跳转方法：

写法一：this.$router.push(/detail?id=${this.$route.query.id});

写法二：this.$router.push({path:‘detail’,query:{id:123}})

要是想获取参数值：各自的获取方法是： query和params分别是：this.$route.query.id，this.$route.params.id

三、query和params在浏览器地址的显示方式 params在浏览器地址栏中不显示参数名称

http://47.107.171.252:8001/#/detail/123456

query在浏览器地址栏中显示参数名称

http://47.107.171.252:8001/#/detail?id=123456