vue-router 路由传参,刷新页面参数丢失-轻识

开发项目时通常会遇到列表详情页的需求，比如vue中可以使用vue-router来实现路由的传参的，但是伤心一下详情页有些参数会丢失的，比如详情页的图片。下面来谈谈vue-router 路由传参，刷新页面参数丢失的解决方法和注意事项。

vue-router传参，刷新会丢失参数解决方法：

常见场景
通过params传参
通过quary传参
使用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?

三、通过quary传参

// 路由配置{     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    }})
// 详情页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)    }}