localStorage配合route.params实现参数的时效性及持久化

1.问题描述

单纯使用localStorage存取参数，在页面跳转后有时候无法及时获取到参数
单纯使用route.params可以即时获取参数，但是页面刷新后，参数会丢失

2.结合两种方式的方案

父组件中传递参数

localStorage.setItem("userId", userId);
this.$router.push({name:'detail',params:{userId:userId}});   

子组件获取参数

let userId=localStorage.userId?localStorage.userId:this.$route.params.userId;

另一种方案：通过$router.query

this.$router.push({name:'detail',query:{userId:userId}});  

这样参数会出现在url中，观感欠佳

1.Params
由于动态路由也是传递params的，所以在 this.$router.push() 方法中 path不能和params一起使用，否则params将无效。需要用name来指定页面。
在路由配置文件中定义参数：

path: '/patient/record_detail',
name: 'record_detail',
component: record_detail

注意事项
路由跳转用的是$router this.$router.push
读取参数用的是$route this.$route.params