vue路由传参接收以及传参对象为对象时的问题及解决

下面是关于"Vue路由传参接收以及传参对象为对象时的问题及解决"的完整攻略：

路由传参

在Vue中，我们可以通过该框架提供的路由机制实现页面之间的跳转，而路由传参是一种常用的实现方式，可以让我们在不同组件之间传递数据。下面是两种常见的路由传参方式。

1. 动态路由传参

动态路由传参是通过URL参数来传递数据，参数可以包含在路由地址的路径中。例如：

const router = new VueRouter({
  routes:[
      {
          path:'/user/:id',
          component:User
      },
  ]
})

上述代码指定了一个名为"User"的组件，其中":id"表示参数，当用户访问"/user/123"时，参数"id"的值为"123"，因此可以在组件中通过"$route.params.id"来获取参数值。

2. 查询路由传参

查询路由传参是通过URL查询参数来传递数据，参数可以包含在路由地址的查询参数中。例如：

const router = new VueRouter({
  routes:[
      {
          path:'/user',
          component:User
      },
  ]
})

上述代码指定了一个名为"User"的组件，当用户访问"/user?id=123"时，"id"为查询参数的键名，"123"为对应的值，可以在组件中通过"$route.query.id"来获取参数值。

传参对象为对象时的问题及解决

当我们想要在路由传参中传递复杂数据类型如对象时，我们会遇到组件之间数据不一致的问题，因为对象是引用类型。下面是示例代码，有效展示了这个问题：

let user={
    id:'001',
    name:'Tom'
};
this.$router.push({
    name:'User',
    params:{
        user:user
    }
})

export default {
    name:'User',
    props:{
        user:{
            type:Object,
            required:true
        }
    }
}

这段代码中，我们希望在路由传参中传递一个名为"user"的对象参数，但是，在组件内我们会发现，传递过来的参数和我们预期的不一致。原因在于我们通过路由传递的"user"对象被序列化成了字符串，再被解析为一个新的对象。因此，我们需要在路由传递对象时进行序列化操作，有两种解决方法。

1. $route.query

第一种方法是使用$route.query来代替$params，示例代码如下：

let user={
    id:'001',
    name:'Tom'
};
let query={
    user:JSON.stringify(user)
}
this.$router.push({
    name:'User',
    query:query
})

export default {
    name:'User',
    props:{
        user:{
            type:Object,
            required:true
        }
    },
    created() {
        this.user=JSON.parse(this.$route.query.user);
    }
}

这段代码中，我们将"user"对象进行JSON序列化并传递到"$route.query"中进行传递，在接收的组件中再进行解析操作。

2. sessionStorage

第二种方法是使用sessionStorage存储传递的对象，示例代码如下：

let user={
    id:'001',
    name:'Tom'
};
sessionStorage.setItem('user',JSON.stringify(user));
this.$router.push({
    name:'User'
})

export default {
    name:'User',
    props:{
        user:{
            type:Object,
            required:true
        }
    },
    created() {
        this.user=JSON.parse(sessionStorage.getItem('user'));
    }
}

这段代码中，我们将"user"对象进行JSON序列化并存储到sessionStorage中，页面跳转后在接收的组件中再进行解析操作。