Could you please review this code snippet: It displays two routes that utilize the same component to fetch content from an API.
Main.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'
}
}
]
});
BaseContent.vue
<base-section v-for="entry in this.entries" :key="entry" lang="lang-markup" :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>
THE ISSUE: This setup functions properly. However, there are a couple of concerns bothering me. 1st - The content behaves oddly when switching between routes; the content flickers between both route's content before displaying the correct one 2nn - Observing the DEV TOOLS reveals constant updates on the content (the section tag on the code tab flashes purple repeatedly, indicating updates).
Any advice on what I might be missing?
PS: I am new to VUE JS.
Thank you very much!!!
Regards, T.