vue进阶基础(九):query和params的区别

131 阅读1分钟

1 用法上

query可以用name或path来引入:

<router-link :to="{name:'register',query:{id:10}}">注册</router-link>

<router-link :to="{path:'/register',query:{id:10}}">注册</router-link>

params必需要用name来引入:

<router-link :to="{name:'register',params:{id:10}}">注册</router-link>

2 接受参数

this.$route.query.id

this.$route.params.id

3 刷新问题上

使用query时,地址栏会直接加入参数,刷新页面或者返回参数不会丢失

使用params时,如果未在路由设置中加入相关参数,刷新页面或者返回参数会丢失,解决方法在路由设置中加入相关参数就不会出现刷新页面数据丢失问题

{path: '/register/:id',name: 'Register',component: Register},