如何处理vuerouter路由传参刷新页⾯参数丢失
⽬录
概述
⽅法⼀：通过 params 传参
⽅法⼆：通过 query 传参
⽅法三：使⽤ props 配合组件路由解耦
概述
常见场景：点击列表的详情，跳转到详情内页，在内页根据传递的参数获取详情数据。
路由传参⼀般有如下⼏种⽅式，下⾯主要介编程式导航 router.push 的传参⽅式：
⽅法⼀：通过 params 传参
路由配置如下：
{
path: '/detail/:id',  //若id后⾯加?代表这个参数是可选的
name: 'detail',
component: Detail
}
通过 $router.push 中 path 携带参数的⽅式
// 列表中的传参
goDetail(row) {
this.$router.push({
path: `/detail/${row.id}`
})
}
// 详情页获取参数
this.$route.params.id
通过 $router.push 的 params 传参
// 列表页传参
goDetail(row) {
this.$router.push({
name: 'detail',
params: {
id: row.id
}
})
}
// 详情页获取
this.$route.params.id
注：这种⽅式的传参，路径⽤ name，路径⽤ name，路径⽤ name , ⽤ path 会获取不到；如果在路由配置中没有添加 /:id即path: 'detail'，url 中不会显⽰ id，在详情页还是可以拿到参数 id，但刷新后参数丢失。
以上这两种⽅式，传递的参数 id 会在 url 后⾯显⽰，如图：
传递的参数会暴露在⽹址中。
如果在路由中设置了params参数 /:id，但是在跳转的时候没有传递参数，会导致页⾯没有内容或跳转失败，可在后⾯加？代表这个参数是可选的，即 /:id?
⽅法⼆：通过 query 传参
/
/ 路由配置
{
path: '/detail',
name: 'detail',
component: Detail
}
// 列表页
goDetail(row) {
this.$router.push({
path: '/detail',
query: {
id: row.id
}
})
}
// 详情页
this.$route.query.id
注：这种⽅式传递的参数会在地址栏的 url 后⾯显⽰ ?id=?，类似于 get 传参；query 必须配合 path 来传参。
传递的参数是对象或数组
还有⼀种情况就是，如果通过 query 的⽅式传递对象或数组，在地址栏中会被强制转换成 [object Object]，刷新后也获取不到对象值。
此时可以通过 JSON.stringify() ⽅法将要传递的参数转换为字符串传递，在详情页再通过 JSON.parse()
转换成对象。
let parObj = JSON.stringify(obj)
this.$router.push({
path: '/detail',
query: {
'obj': parObj
react router传参数
}
})
// 详情页
JSON.parse(this.$route.query.obj)
这个⽅法虽然可以传递对象，若数据少还好，数据多的话地址栏就很长了
注意：在所有的⼦组件中获取路由参数是 $route不是 $router
以上 params 和 query 传参⽅式对⽐：
通过 $router.push 的 params + name 传参，若路由中没有设置params参数，参数不会拼接在路由后⾯，但是页⾯刷新参数会丢失。
通过 $router.push 中 path 携带参数或通过 query 传参，参数会拼接在地址后⾯，会暴露信息。
⽅法三：使⽤ props 配合组件路由解耦
// 路由配置
{
path: '/detail/:id',
name: 'detail',
component: Detail,
props: true // 如果props设置为true，$route.params将被设置为组件属性
}
// 列表页
goDetail(row) {
this.$router.push({
path: '/detail',
query: {
id: row.id
}
})
}
// 详情页
export default {
props: {
// 将路由中传递的参数id解耦到组件的props属性上
id: String
},
mounted: {
console.log(this.id)
}
}
此外，还可以通过把参数存在 sessionStorage 或 localStorage 中来解决页⾯刷新参数丢失的问题，具体结合实际项⽬即可。以上就是如何处理vue router 路由传参刷新页⾯参数丢失的详细内容，更多关于vue的资料请关注其它相关⽂章！