0

我对 Vue 很陌生。我安装了 Vuex 4、Vue Router 4 和 Vue 3 cli。

我正在从一个大的 json 文件中获取数据并将其放入我的 vuex 存储中。该文件由许多嵌套数组/对象构成，这些嵌套数组/对象基于“银河-有-星团-有-恒星-有-行星”等概念，每个都有自己的对象，每个对象都有很多属性。

顶层存储在 vuex 中，我有一个 GalaxyView 文件，如下所示：

<template>
  <section class="views galaxy">
    <h1>Galaxy</h1>
    <router-link
      v-for="cluster in Galaxy"
      :key="cluster.Name"
      :to="{
        name: 'cluster.show',
        params: {
          clusterName: cluster.Name,
        },
      }"
      :id="cluster.Name"
      class="cluster"
    >
      <button class="clusterBtn btn">{{ cluster.Name }}</button>
    </router-link>
    <router-view />
  </section>
</template>

<script>
export default {
  data() {
    return {};
  },
  computed: {
    Galaxy() {
      return this.$store.state.Galaxy[0].Clusters;
    },
  },
};
</script>

第一个视图完美运行，并显示了一个全屏按钮，一旦单击，应该转到每个星团 - 这应该显示一堆星按钮，然后应该转到行星等。

我需要一种方法将被点击的特定星团/恒星/行星以及随之而来的对象数据发送到每个后续视图，以便我可以遍历并显示属性。

我尝试的第一种方法是直接使用组件并使用像这样的道具

<Stars :cluster-parent="star" />

然后在下一个视图中迭代它 - 但是它很混乱，我觉得 vue-router 路由（不是双关语）是更好和更清洁的选择。

有没有办法通过创建动态路由器链接来做到这一点，或者我应该回到使用组件/道具方式吗？

这是我的路线 atm

  {
    path: '/galaxy',
    name: 'Galaxy',
    props: true,
    component: () => import(/* webpackChunkName: "galaxy" */ '../views/GalaxyView.vue'),
  },
  {
    path: '/galaxy/:clusterName/',
    name: 'cluster.show',
    props: true,
    component: () => import(/* webpackChunkName: "cluster" */ '../views/ClusterView.vue'),
  },
  {
    path: '/galaxy/:clusterName/:starName/',
    name: 'star.show',
    props: true,
    component: () => import(/* webpackChunkName: "star" */ '../views/StarView.vue'),
  }

谢谢！

4

0 回答 0