Use one component in multiple routes

Author : Hannah Bone | Published On : 13 Jul 2021

It’s a pretty common situation developers encounter where multiple routes resolve to the same Vue component. 

However, the problem is that Vue optimizes your app and reuses existing components instead of creating new ones. So if you try to switch between routes that use the same component, nothing will change. 

 

router.js
const routes = [
  {
    path: "/a",
    component: MyComponent
  },
  {
    path: "/b",
    component: MyComponent
  },
];

 

To fix this, you will need to add a :key property onto your <router-view> element – which is likely in your App.vue file. This will help your router recognize when the page is different.

App.vue
<router-view :key='$route.path' />

 

Now, your app will not reuse existing components and will update your content when you switch routes. 

If you learn Vue.js this link will be useful for you: https://itmaster-soft.com/en/vue-js-development-services