在App.vue中，我从index.html解析JSON数据，将其分配给数据“parsedUser”，并将其作为prop“user”发送。“user”会顺利传递给2个子组件中的1个。另一个组件会收到空字符串，Vue devtool会确认这一点（没有错误）。不过，它接收“testProp”的情况很好。换句话说，component 2接收我发送给它的任何prop，而不是这个特定的解析数据。我知道可能有一种通过路由器配置使用vue路由器prop的方法，虽然我不反对这样做，但似乎我目前的解决方案“有效”，至少对于2个组件中的1个，因此应该对两者都起作用。
index.html:

<div id="app">
  {{ username|json_script:"username" }}
</div>

App.vue:

<template>
  <router-view :user="parsedUser" :user2="parsedUser2" :testProp="testProp"/>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      parsedUser: 'User not authenticated',
      parsedUser2: 'User not authenticated',
      testProp: 'User not authenticated'

    }
  },
  created() {
    const parsedData = JSON.parse(document.getElementById('username').textContent);
    this.parsedUser = parsedData;
    this.parsedUser2 = parsedData;
  },
}
</script>

组件2存在问题：

<template>
...
      <h1>{{ user }}{{ user2 }}{{ testProp }}</h1>
...
</template>

<script>
...
export default {
  name: 'MainComp',
   props: {
     user: String,
     user2: String,
     testProp: String
  },
 ...
</script>

路由器配置：

import { createWebHistory, createRouter } from "vue-router";

import AnagramMain from "./components/Anagram/AnagramMain.vue";
import MathMain from "./components/Math/MathMain.vue";

const routes = [
  {
    path: '/math-game',
    component: MathMain
  },
  {
    path: '/anagram-game',
    component: AnagramMain
  }
];

const router = createRouter({
  history: createWebHistory(),
  routes: routes,
});

export default router;

• 尝试在index.html中复制上下文数据，并将其解析为两个单独的值。
• 尝试只将解析后的数据发送到组件编号2。
• 尝试了一些其他的生命周期挂钩选项。
• 仔细检查了我的路由器配置