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

Question

请检查这段代码：它基本上显示了两条路线，使用使用来自 API 的内容的相同组件。主.jsconst 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。