Vue中用JSON.stringify通过Query传对象数组是否规范？如何优化？

1. 通过查询字符串传递对象数据是否属于常规做法？ #

不属于常规做法，核心原因有三点：

• 长度限制：查询字符串存在浏览器/服务器的长度上限（通常几KB），数组数据量较大时会被截断，直接导致数据丢失。
• 安全性与美观性：数据会明文暴露在URL中，若包含敏感信息存在泄露风险，同时会让URL变得冗长杂乱。
• 解析风险：对象转JSON字符串再反向解析的过程中，若包含特殊字符（如引号、斜杠）可能出现转义错误，导致解析失败。

只有传递小量、非敏感、无需保密的简单数据（如分页页码、筛选关键词）时，才会偶尔使用查询字符串。

2. 如何优化当前的代码实现？ #

根据你的场景，推荐以下几种优化方案，按实用性排序：

方案一：优化查询字符串传递流程（适合临时小数据） #

如果坚持用查询字符串传递，可在路由层自动完成JSON解析，避免组件内重复处理：

• 修改router.js，用props函数自动解析查询参数：

const router = createRouter({
    history: createWebHistory(),
    routes: [
        {
            path: '/word-game',
            name: 'WordGame',
            component: () => import('../views/SampleView.vue'),
            props: (route) => ({
                gameWords: route.query.gameWords ? JSON.parse(route.query.gameWords) : []
            })
        },
    ]
});

• 修改HomeView.vue的跳转按钮，确保正确序列化数据：

<v-btn size="small" :to="{ name: 'WordGame', query: {gameWords: JSON.stringify(words)} }" class="float-right">单词游戏</v-btn>

• SampleView.vue直接使用props接收解析后的数组：

<script>
export default {
  props: ['gameWords'],
  mounted() {
    console.log(this.gameWords); // 直接获取解析后的数组
  }
}
</script>

方案二：使用状态管理（推荐，适合中大型数据/全局共享） #

用Pinia（Vue3官方推荐）或Vuex存储数据，组件间通过状态仓库共享，无需路由传参：

1. 安装Pinia并创建仓库：

// stores/wordStore.js
import { defineStore } from 'pinia'

export const useWordStore = defineStore('word', {
  state: () => ({
    gameWords: []
  }),
  actions: {
    setGameWords(words) {
      this.gameWords = words
    }
  }
})

2. HomeView.vue中存储数据并跳转：

<template>
  <!-- 其他代码 -->
  <v-btn size="small" @click="navigateToGame" class="float-right">单词游戏</v-btn>
</template>

<script setup>
import { useWordStore } from '@/stores/wordStore'
import { useRouter } from 'vue-router'

const wordStore = useWordStore()
const router = useRouter()
// 假设words是你的对象数组
const words = [
    { key: "key1", word: "test-name", definition: "test-definition", text: '' },
    { key: "key2", word: "test-name", definition: "test-definition", text: '' },
]

const navigateToGame = () => {
  wordStore.setGameWords(words)
  router.push({ name: 'WordGame' })
}
</script>

3. SampleView.vue中直接获取仓库数据：

<template>
  <div class="ma-5">
    <v-row v-for="word in gameWords" :key="word.key">
      <v-col>
        <v-card :text="word.word"></v-card>
      </v-col>
      <v-col>
          <v-text-field v-model="word.text"></v-text-field>
      </v-col>
    </v-row>
    <v-row class="me-1" justify="end">
      <v-btn @click="submit">提交</v-btn>
    </v-row>
  </div>
</template>

<script setup>
import { useWordStore } from '@/stores/wordStore'
import { storeToRefs } from 'pinia'

const wordStore = useWordStore()
const { gameWords } = storeToRefs(wordStore) // 保持数据响应式

const submit = () => {
  console.log(gameWords) // 直接使用仓库中的数据
}
</script>

方案三：使用路由params（局限性较大） #

若用params传递，需注意在history模式下刷新页面会丢失数据，且仅适合传递标识类数据，不适合大数组：

• 修改router.js：

routes: [
    {
        path: '/word-game/:gameWords',
        name: 'WordGame',
        component: () => import('../views/SampleView.vue'),
        props: (route) => ({
            gameWords: JSON.parse(route.params.gameWords)
        })
    },
]

• 跳转时序列化数据：

<v-btn size="small" :to="{ name: 'WordGame', params: {gameWords: JSON.stringify(words)} }" class="float-right">单词游戏</v-btn>

内容的提问来源于stack exchange，提问作者Byeongsu KIM