vue路由携带参数跳转页面刷新数据不丢失

1、“el-table中数据”  携带列表参数跳转页面可以实现刷新页面参数不丢失
editBtn(row){
  this.$router.push({
    path: '/xxxx',
    query: {
      params: JSON.stringify(row)
    }
  });
},


2、详情页面接受数据
this.lastParames = JSON.parse(this.$route.query.params)
总结：可以实现刷新数据不丢失，但是上一个页面所携带参数会暴露在地址栏，影响安全性

二、使用props配合组件路由解耦

1、路由配置中指定参数:id

// 路由配置
{
   path:'/detail/:id',
   name:'detail',
   component:Detail,
   props:true             // 如果props设置为true，$route.params将被设置为组件属性  
}
 
// 路由跳转
this.$router.push({
   path:`/detail/${id}`
})
 
// 详情页获取参数
export default {
  props:['id'],      // 将路由中传递的参数id解耦到组件的props属性上
  mounted(){
    console.log("id",this.id);  
  }
}

2、路由配置中未指定参数:id

// 路由配置
{
   path:'/detail',
   name:'detail',
   component:Detail,
   props:true             // 如果props设置为true，$route.params将被设置为组件属性  
}
 
// 路由跳转
this.$router.push({
   name:'detail',
   params:{
       order:{
         id:'123456789',
         name:'商品名称'  
       }
   }
})
 
// 详情页获取参数
export default {
  props:['order'],      // 将路由中传递的参数order解耦到组件的props属性上
  mounted(){
    console.log("order",this.order);  
  }
}