在Vue3中当一个使用reactive声明的对象，通过路由传参，传过来的参数对象，赋值给普通对象，会失去响应式，解决办法：

最新推荐文章于 2025-03-17 23:45:59 发布

原创最新推荐文章于 2025-03-17 23:45:59 发布 · 336 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #前端

文章讲述了在Vue应用中使用`useRoute`从路由接收参数shop，如何将字符串转换为对象并解决失去响应性的问题，通过使用`reactive`包装对象来保持其响应性。

部署运行你感兴趣的模型镜像

import { useRoute, useRouter } from "vue-router";

const route = useRoute();
console.log(route.query);
// 接收传过来的参数 shop
let shop = route.query.shop;
// console.log(typeof shop) ;

// 字符串转对象为shops
let shops = JSON.parse(shop);

// 当路由传参接收到参数对象后，失去响应式，可以给该对象外层套一层对象，解决失去响应问题
let shops1 = reactive({
  shops
})

您可能感兴趣的与本文相关的镜像