vue路由传参,query和params的区别

路由传参是使用vue最常用的方法,而其中query和params都能实现传参效果,不过这两者还是有区别的

首先路由配置
{ path: '/admin',//组件路径 name: 'admin',//组件别名 component: Admin, //组件名 }

然后路由跳转传参

使用params:
this.$router.push({ name:"admin", params:{id:"111"} })

使用query:
this.$router.push({ path:"/admin", query:{id:"111"} })

这里的params和query都是一个对象,id是属性名,111是传参的值(也可以用变量代替固定值)
不过使用query跳转之后浏览器的路径就会多一个参数, 即是:id=111 ,跳转过后的新页面通过解析链接路径来获取参数对象,即是 this.$route.query
而使用params则不会出现以上情况,但页面一刷新,也就获取不到参数对象了,而获取参数对象的方法是 this.$route.params

注意,params和path是不能混用的
例如:
this.$router.push({ path:"/admin", params:{id:item.id} })

这是错误的,根本没法跳转

总结一下区别
1,params传参
只能用 name,不能用 path。
地址栏不显示参数名称 id,但是有参数的值。

2,query传参
name 和 path 都能用。用 path 的时候,提供的 path 值必须是相对于根路径的相对路径,而不是相对于父路由的相对路径,否则无法成功访问。
地址栏显示参数格式为?id=0&code=1

posted @ 2022-10-19 09:17  我超凶的  阅读(1113)  评论(0编辑  收藏  举报