vue如何通过params和query传值(刷新不丢失)
更新时间：2022年04月29日 16:56:47 作者：Xyp9x.
这篇文章主要介绍了vue如何通过params和query传值(刷新不丢失)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
vue通过路由传值
在许多跳转的同时需要完成携带参数，并且在刷新的同时不丢失参数。
$router：是路由操作对象，只写对象
$route：路由信息对象，只读对象
一. 通过query传递参数刷新不丢失参数
在需要传值的页面：
this.$router.push({
path: '/tasks',//通过path跳转
query: {
id : id,
formId : formId
}
})
设置的router:
{
path: '/tasks',
name: 'tasks-detail',
component: () => import('@/views/todo/detail.vue')
},
在地址栏便会是这样的格式显示出参数，很像get请求的形式
通过在跳转的页面运用this.$route的方法得到传参
因为存放在地址栏所以刷新也会通过this.$route拿到。
二. 通过params传递参数刷新不丢失参数
如果要做到刷新不还能获取，其实也是在地址栏另一形式的存参在需要传值的页面：
this.$router.push({
path : `/tasks/${item.id}/${item.formId}`,
})
设置的router:
{
path: '/tasks/:id/:formId',
name: 'tasks-detail',
component: () => import('@/views/todo/detail.vue')
},
在地址栏便会是这样的格式显示出参数,一一对应
同样也刷新不会改变，如果是通过params传参的形式刷新参数便会丢失,类似下面这种
path:'/tasks',
params: {
id : item.id,
formId : item.formId
}
三. 同时使用params和query传递参数刷新不丢失参数
如果要做到刷新不还能获取，同样也是地址栏另一形式的存参在需要传值的页面：
this.$router.push({
path: '/tasks/' + item.id,
query: {
formId : item.formId
},
})
设置的router:
{
path: '/tasks/:taskId',
name: 'tasks-detail',
props: (route) => ({ ...route.query, ...route.params }),//可以运用props结合扩展运算符获取参数
component: () => import('@/views/todo/detail.vue')
},
在地址栏便会是这样的格式显示出参数
同样也刷新不会改变,地址栏更能看出结合版，这种混合运用利用props更方便接收值
总的来说
1.如果需要做到刷新不丢失参数和值必须通过地址栏
2.query传参地址更像是get请求的格式
3.params如果需要刷新不丢是直接在path上对应形式传参，不能通过params的对象传参
4.结合使用可以通过props更好的接收参数
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Vue中如何设置全局的cookie对象，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
这篇文章主要为大家详细介绍了VUE实现图片验证码功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-10-10
文章主要介绍了Vue3中的响应式数据处理机制,包括ref和reactive函数的使用,它们的区别,以及如何使用watch和watchEffect来监听数据变化,文章最后提到了Vue3的生命周期钩子和自定义hooks的概念,感兴趣的朋友跟随小编一起看看吧2024-11-11
这篇文章主要为大家介绍了defineProperty和Proxy基础功能及性能对比，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
这篇文章主要介绍了vue关于Promise的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-06-06
这篇文章主要为大家介绍了Vue之生命周期函数，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2021-11-11
介绍了如何在Vue项目中使用Axios封装请求、配置拦截器,并在api.js中统一管理API接口,同时,也讲解了如何在vite.config.js中配置解决跨域问题,这些操作可以优化前端代码结构,提高开发效率2024-09-09
本篇文章主要介绍了VUE页面中加载外部HTML的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
在lodash函数工具库中，防抖 _.debounce 和节流 _.throttle 函数在一些频繁触发的事件中比较常用，这篇文章主要介绍了vue项目使用lodash节流防抖函数问题与解决,需要的朋友可以参考下2023-10-10
这篇文章主要介绍了vue-cli随机生成port源码的方法，文中给大家介绍了vue 随机色生成方法,需要的朋友可以参考下2019-09-09
最新评论