1.query传参

• 优点：页面刷新参数不会丢失，可以用来作为分享页的路由跳转方式;
• 缺点：类似于get,传递参数在url后面拼接,会直接暴露在地址栏，如果参数过多，地址栏会因为参数过多而变得丑陋不堪;

编程式 

//路由跳转并传参
this.$router.push({path:'/nextPage',query:{id:'hello query'}})
//目标组件接收参数
const data = this.$route.query.id
console.log('路由参数:', data)
//路由参数:hello query

 声明式

//路由跳转并传参
<router-link to="{path:'/nextPage',query:{id:'hello query'}}"></router-link>
//目标组件接收参数
const data = this.$route.query.id
console.log('路由参数:', data)
//路由参数:hello query

2. params传参

• 注意：params传参，必须使用命名路由；
• 优点：隐式传参，优雅传参，类似于post，不会把参数拼接在地址栏；
• 缺点：怕刷新，页面刷新传递参数丢失，不能作为分享页的路由跳转方式；

 编程式 

//路由跳转并传参，对比query传参，path 换成 name ，即为命名路由
this.$router.push({name: 'nextPage',params:{id:'hello params'}})
//目标组件接收参数
const data = this.$route.params.id
console.log('路由参数:', data)
//路由参数:hello params

 声明式

//路由跳转并传参，对比query传参，path 换成 name ，即为命名路由
<router-link to="{name: 'nextPage',params:{id:'hello params'}}"></router-link>
//目标组件接收参数
const data = this.$route.params.id
console.log('路由参数:', data)
//路由参数:hello params

3.query(第三种写法)

 编程式 

//路由跳转并传参
this.$router.push('/nextPage?id='+id)
//目标组件接收参数
const data = this.$route.query.id
console.log('路由参数:', data)
//路由参数:hello query

 声明式

//路由跳转并传参
<router-link to="'/nextPage?id='+id"></router-link>
//目标组件接收参数
const data = this.$route.query.id
console.log('路由参数:', data)
//路由参数:hello query

最后

以上就是酷炫手链为你收集整理的vue中query和params传参(新手来看不会的留言)1.query传参2. params传参3.query(第三种写法)的全部内容，希望文章能够帮你解决vue中query和params传参(新手来看不会的留言)1.query传参2. params传参3.query(第三种写法)所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。