标签：

在 Vue 项目中，您可以通过路由的查询参数或状态管理（如 Vuex）来传递 JSON 对象类型的数据到另一个路由页面。以下是使用这两种方法的示例：

方法一：使用路由查询参数

1. 在跳转时传递参数：

   在你的组件中，你可以使用 this.$router.push 方法将数据作为查询参数传递。例如：

   const jsonData = { name: 'John', age: 30 }; // 你的 JSON 数据
   this.$router.push({ 
       path: '/target-page', 
       query: { data: JSON.stringify(jsonData) } 
   });
   

   Copy
   JavaScript

2. 在目标页面获取参数：

   在目标组件中，可以通过 this.$route.query 获取传递过来的参数：

   mounted() {
       const jsonData = JSON.parse(this.$route.query.data);
       console.log(jsonData); // 这是传递过来的 JSON 数据
   }
   

   Copy
   JavaScript

方法二：使用 Vuex

如果数据较大或者复杂，可以考虑使用 Vuex 来管理状态。

1. 在 Vuex store 中定义状态：

   // store.js
   const store = new Vuex.Store({
       state: {
           jsonData: null
       },
       mutations: {
           setJsonData(state, data) {
               state.jsonData = data;
           }
       }
   });
   

   Copy
   JavaScript

2. 在源组件中设置数据：

   当您要跳转到另一个页面时，首先在 Vuex 中设置数据：

   const jsonData = { name: 'John', age: 30 };
   this.$store.commit('setJsonData', jsonData);
   this.$router.push('/target-page');
   

   Copy
   JavaScript

3. 在目标组件中获取数据：

   在目标组件中，通过 this.$store.state.jsonData 获取 JSON 数据：

   computed: {
       jsonData() {
           return this.$store.state.jsonData;
       }
   },
   mounted() {
       console.log(this.jsonData); // 这是传递过来的 JSON 数据
   }

标签：
来源：

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。