使用不同的路由但使用相同的组件 VueJS 3 获取数据

Question

请检查这段代码：它基本上显示了两条路线，使用使用来自 API 的内容的相同组件。

主.js

const router = createRouter({

    history: createWebHistory(),

    routes: [

        {

            path: "/route1",

            name: "Route1",

            component: BaseContent,

            meta: {

                title: 'Route 1'

            }

        },

        {

            path: "/route2",

            name: "Route2",

            component: BaseContent,

            meta: {

                title: 'Route2'

            }

        }

    ]

});

基础内容.vue

  <base-section v-for="entry in this.entries" :key="entry" :title="entry.title">

  <template v-slot:content>

      <div v-html="entry.content"></div>

  </template>

    <template v-slot:examples>

      <div v-html="entry.examples"></div>

    </template>

    <template v-slot:code>

        {{entry.code}}

    </template>

  </base-section>

</template>

<script>

export default {

  mounted(){

    this.$nextTick(function () {

    Prism.highlightAll();

    this.getData()

  })

  },

    

  updated(){

    this.$nextTick(function () {

    Prism.highlightAll();

    this.getData()

  })

  },

  methods:{

    getData(){

      const url= 'https://example.dev/api/collections/get/'+this.$route.name+'?token=XXXXXXXXX'

    

    fetch(url)

    .then(collection => collection.json())

    .then(collection => {

      const entries = [];

            for (const id in collection.entries) {

              entries.push({

                title: collection.entries[id].Title,

                content: collection.entries[id].Content,

                examples: collection.entries[id].Examples,

                code: collection.entries[id].Code,

              });

            }

            this.entries = entries;

    });

    }

  },

  data() {

    return {

      entries:[]

    };

  },

};

</script>

问题： 这个解决方案有效。但是有两件事让我发疯。 1st - 内容以一种奇怪的方式表现，当我单击链接以遵循这些路线中的任何一条时，内容在实际呈现正确内容之前在两条路线内容之间闪烁 2nn - 如果我打开 DEV TOOLS， 我看到content Is CONSTANTLY updating（开发工具代码选项卡上的部分标签不断闪烁紫色，表示更新）。

关于我做错了什么的任何提示？

Answer 1

我设法解决了这个问题。经过一番挖掘，我发现我所需要的只是为文件中的组件提供一个唯一:key标识符。<router-view>App.vue所以我刚刚添加了这个：<router-view :key="$route.fullPath"></router-view>它解决了这个问题，因为 Vue 的反应系统知道它需要再次重新加载整个组件，因为键是唯一的，而之前它不是。希望能帮助别人！问候，T。