sunny123456

  博客园 :: 首页 :: 博问 :: 闪存 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理 ::
  1793 随笔 :: 22 文章 :: 24 评论 :: 225万 阅读
< 2025年2月 >
26 27 28 29 30 31 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 1
2 3 4 5 6 7 8

vue中 通过 params 传递对象参数
在 Vue 中,通过路由的 params 传递参数是一种常见的需求,尤其是在使用 Vue Router 时。params 是一种动态路由参数,通常用于传递路径中的变量,例如 /user/:id。然而,params 本身并不支持直接传递对象类型的数据。如果需要传递对象参数,可以通过以下几种方式实现:

方法 1:使用 query 参数

query 参数是 URL 的查询字符串部分,可以直接传递对象数据。Vue Router 会自动将对象序列化为查询字符串。

// 跳转到目标路由,并传递对象参数
this.$router.push({
  name: 'TargetRoute',
  query: { key1: 'value1', key2: 'value2' }
});

在目标路由中,可以通过 this.$route.query 获取参数:

export default {
  mounted() {
    console.log(this.$route.query); // { key1: 'value1', key2: 'value2' }
  }
};

方法 2:使用 params 传递 JSON 字符串

如果需要通过 params 传递对象,可以将对象序列化为 JSON 字符串,然后在目标路由中解析。

发送端

const obj = { key1: 'value1', key2: 'value2' };
this.$router.push({
  name: 'TargetRoute',
  params: { data: JSON.stringify(obj) }
});

接收端

export default {
  mounted() {
    const data = JSON.parse(this.$route.params.data);
    console.log(data); // { key1: 'value1', key2: 'value2' }
  }
};

方法 3:使用 Vuex 或其他状态管理

如果需要在多个组件或路由之间共享数据,可以使用 Vuex 或其他状态管理库来存储对象数据。

Vuex 示例

  1. 定义 Vuex 状态

    // store.js
    import { createStore } from 'vuex';
    
    export default createStore({
      state: {
        sharedData: null
      },
      mutations: {
        setSharedData(state, data) {
          state.sharedData = data;
        }
      }
    });
    
  2. 发送端

    import { useStore } from 'vuex';
    
    const store = useStore();
    const obj = { key1: 'value1', key2: 'value2' };
    
    store.commit('setSharedData', obj);
    this.$router.push({ name: 'TargetRoute' });
    
  3. 接收端

    import { useStore } from 'vuex';
    
    export default {
      setup() {
        const store = useStore();
        const sharedData = store.state.sharedData;
    
        console.log(sharedData); // { key1: 'value1', key2: 'value2' }
      }
    };
    

方法 4:使用 localStoragesessionStorage

如果数据不需要在组件之间共享,但需要在页面刷新后仍然可用,可以使用 localStoragesessionStorage

发送端

const obj = { key1: 'value1', key2: 'value2' };
localStorage.setItem('sharedData', JSON.stringify(obj));
this.$router.push({ name: 'TargetRoute' });

接收端

export default {
  mounted() {
    const data = JSON.parse(localStorage.getItem('sharedData'));
    console.log(data); // { key1: 'value1', key2: 'value2' }
  }
};

总结

  • 如果需要传递简单的键值对数据,推荐使用 query 参数。
  • 如果需要传递复杂对象,可以通过 params 传递 JSON 字符串,或使用 Vuex、localStoragesessionStorage
  • 根据你的需求选择合适的方法。
posted on   sunny123456  阅读(13)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· spring官宣接入deepseek,真的太香了~
历史上的今天:
2021-01-20 C#对DataTable里数据排序的方法
2021-01-20 Ajax中传递Json格式的参数
2021-01-20 C# 中 PadLeft ,PadRight的用法
2021-01-20 C# 计算百分比
2021-01-20 单例模式的五种写法
2021-01-20 上传excel 通过url下载文件 java
2021-01-20 Vue和Bootstrap的整合之路
点击右上角即可分享
微信分享提示