vue query传参,刷新页面数据丢失,vue params query
本文主要介绍vue如何通过params和query传递值(刷新不丢失)，有很好的参考价值。希望对你有帮助。如有错误或不足之处，请不吝赐教。
目录
vue通过路由传递值。1.通过查询传递参数刷新，而不丢失参数。2.通过params传递参数刷新，而不丢失参数。3.通过params传递参数刷新，同时查询，不丢失参数。总的来说，
vue通过路由传值
很多跳转中需要携带参数，刷新时参数不会丢失。
$router:是路由操作对象，只写对象。
$route:路由信息对象，只读对象
一. 通过query传递参数刷新不丢失参数
在需要传递值的页面上：
这个。$router.push({
路径：“/tasks”，//在路径中跳转
查询：{
id : id，
formId : formId
}
})
将路由器设置为：
{
路径：“/任务”，
名称：“任务-详细信息”，
component:()=import( @/views/todo/detail . vue )
},
在地址栏中，参数将以这种格式显示，很像get请求的形式。
用这个。$route方法来获取跳转页面中的引用。
因为它存储在地址栏中，所以刷新也将通过这个获得。$route。
二. 通过params传递参数刷新不丢失参数
想刷新，也拿不到。事实上，这是在需要传递的页面地址栏中保存引用的另一种形式：
这个。$router.push({
路径：`/tasks/$ { item . id }/$ { item . formid } `，
})
将路由器设置为：
{
路径：“/tasks/:id/:formId”，
名称：“任务-详细信息”，
component:()=import( @/views/todo/detail . vue )
},
在地址栏中，参数将以这种格式一个接一个地显示。
同样，刷新也不会改变。如果以params的形式刷新参数，将会丢失它们，如下所示。
路径：“/任务”，
参数：{
id : item.id，
formId : item.formId
}
三. 同时使用params和query传递参数刷新不丢失参数
如果你想刷新却无法获得，地址栏的另一种形式也是保存页面上需要传递值的引用：
这个。$router.push({
路径：“/tasks/”item . id，
查询：{
formId : item.formId
},
})
将路由器设置为：
{
路径：“/tasks/:taskId”，
名称：“任务-详细信息”，
道具：(路线)=({.路由查询，route.params})，//可以使用props结合扩展运算符来获取参数。
component:()=import( @/views/todo/detail . vue )
},
在地址栏中，参数将以这种格式显示。
同样的，刷新也不会改变，在地址栏可以更清楚的看到合并后的版本。这种混合应用程序通过使用props更容易接收值。
总的来说
1.如果需要在不丢失参数和值的情况下刷新，必须通过地址栏。
2 .查询参数address更像get请求的格式
3.如果params需要刷新且不丢失，会直接在path上传递相应形式的参数，不能通过params对象传递参数。
4.组合使用可以更好的通过道具接收参数。
以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。