Fetching data using different routes but using same component VueJS 3

Question

Please check this code: It basically shows two routes, using the same component that consumes 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 PROBLEM: This solution works. But there are two things that are making me crazy. 1st - The content is behaving in a strange way, when I click the link to follow any of these routes, the content blinks between both routes content before actually rendering the correct content 2nn - If I open up the DEV TOOLS, I see that the content Is CONSTANTLY updating (the section tag on the code tab of dev tools keeps on flashing purple, meaning updates).

Any hints about what I am doing wrong?

PS: I am new to VUE JS.

Thank you very much!!!

Regards, T.

Answer 1

I have managed to solve the problem. After some digging, I found out that all I needed was to give a unique :key identifier to the <router-view> component in my App.vue file.

So i just added this:

<router-view :key="$route.fullPath"></router-view>

It solves the problem because then Vue's reactivity system knows that it needs to reload the entire component again because the key is unique and before it wasn't.

Hope to help others with this!

Regards, T.