vue路由刷新参数消失,vue router刷新当前页面
本文主要介绍如何处理vue路由器路由参数刷新页面的参数丢失问题。对vue感兴趣的同学可以参考一下。
目录
概述方法一：通过params传递参数方法二：通过查询传递参数方法三：使用props配合组件路由解耦
概述
常见场景：点击列表的明细，跳转到明细内页，根据传递的参数可以得到明细数据。
通常，有几种方法可以传递路由参数。以下是可编程导航router.push参数传递的主要方式：
方法一：通过 params 传参
该路由配置如下：
{
路径：/detail/:id ，//如果添加？指示此参数是可选的。
名称：详细信息，
组件：详细信息
}
通过$router.push中的path携带参数的方式
//传递列表中的参数
goDetail(世界其他地区){
这个。$router.push({
路径：`/detail/${row.id} `
})
}
//获取参数的详细信息页面
这个。$route.params.id
通过router.push的params传递参数
//列表页传递参数。
goDetail(世界其他地区){
这个。$router.push({
名称：详细信息，
参数：{
id: row.id
}
})
}
//获取详细信息页面
这个。$route.params.id
注意：这样就不能用名称、名称、路径来获取参数了。如果路由配置中没有添加/:id，path: detail ，则该id不会显示在url中，在details页面中仍然可以获取参数id，但刷新后参数丢失。
以上两种方式，传递过来的参数id都会显示在url后面，如图：
传递的参数将在URL中公开。
如果在route中设置了params parameter /:id，但在跳转过程中没有传递该参数，则会导致页面没有内容或者跳转失败。可以补充？最后。表示这个参数是可选的，即/:id？
方法二：通过 query 传参
//路由配置
{
路径：“/detail”，
名称：详细信息，
组件：详细信息
}
//列表页面
goDetail(世界其他地区){
这个。$router.push({
路径：“/detail”，
查询：{
id: row.id
}
})
}
//详细信息页面
这个。$route.query.id
注意：这样传递的参数会显示在地址栏的url后面？id=？类似于get传递参数；查询必须与路径协作来传递参数。
传递的参数是对象或数组。
另一种情况，如果查询传递一个对象或数组，会被强制到地址栏的[object Object]，刷新后得不到对象值。
此时，要传递的参数可以通过JSON.stringify()方法转换成字符串，然后在详情页通过JSON.parse()转换成对象。
let parObj=JSON.stringify(obj)
这个。$router.push({
路径：“/detail”，
查询：{
对象:parObj
}
})
//详细信息页面
JSON.parse(这个。$route.query.obj)
这种方法虽然可以传递对象，但是如果数据少，数据多的话地址栏会很长。
注意：在所有子组件中获得的路由参数是$route，而不是$router。
上述参数和查询参数传递方法的比较：
通过$ router.push的params name传递参数，如果路由中没有设置params参数，则该参数不会拼接到路由后面，但是页面刷新参数会丢失。
参数在$router.push中由path携带或者由query传递，参数会拼接在地址后面，这样会暴露信息。
方法三：使用 props 配合组件路由解耦
//路由配置
{
路径：“/detail/:id”，
名称：详细信息，
组件：细节，
Props: true //如果Props设置为true，$route.params将被设置为组件属性
}
//列表页面
goDetail(世界其他地区){
这个。$router.push({
路径：“/detail”，
查询：{
id: row.id
}
})
}
//详细信息页面
导出默认值{
道具：{
//将路由中传递的参数id解耦到组件的props属性
id:字符串
},
已安装：{
console.log(this.id)
}
}
此外，还可以将参数保存在sessionStorage或localStorage中，解决页面刷新参数丢失的问题，可以结合实际项目。
以上就是vue路由器路由参数刷新页面如何处理参数丢失的细节。更多关于vue的信息，请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。