vue中 通过 params 传递对象参数

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：使用 localStorage 或 sessionStorage

如果数据不需要在组件之间共享，但需要在页面刷新后仍然可用，可以使用 localStorage 或 sessionStorage。

发送端

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、localStorage 或 sessionStorage。
• 根据你的需求选择合适的方法。