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);
}
}