Micro Front End / Web Components / Vue Router Error : Uncaught TypeError: Cannot redefine property: $router

问题

I have stucked with a issue, Below is the scenario :

I have developed a vue application (my-admin micro app) which has 4 - 5 screens/components (manage user , manage notifications ,manage roles etc) and i created a router.js where i have wrote following :

...imports... 
Vue.use(VueRouter);
// }
const routes = [
  {
    path: '/',
    name: 'main-layout',
    component: MainLayout,
    children:[
      {
        path : 'manage-user',
        name : 'manage-user',
        component : ManageUserComponent
      },
      {
        path : 'manage-role',
        name : 'manage-role',
        component : ManageRoleComponent
      }
    ]
  }
]

const router = new VueRouter({
  routes
})

export default router

and i imported this router object in my main.js like below :

...imports...
new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

and at last i wrap my this micro app as web component (MainLayout component) in main.js as below :

const myAdmin = wrap(Vue,MainLayout)

window.customElements.define('my-admin', myAdmin)

i build this micro app with following command :

"build": "vue-cli-service build --target wc --name my-admin ./src/main.js",

thats all for this micro app . and it is running perfectly if i run this micro app individually.

But in my scenario , i have a shell application (my-shell) which is developed in Vue only. and this shell application also has its own vue router and imported in its main.js like below :

. shell router :

...imports... 

Vue.use(VueRouter);

const routes = [
  {
    path: '/',
    name: 'container',
    component: Container,
    children:[
      {
        path : 'admin',
        name : 'admin-microapp',
        component : AdminMicroAppContainerComponent
      },
      {
        path : 'other',
        name : 'other-microapp',
        component : OtherMicroAppContainerComponent
      }
    ]
 }
]

const router = new VueRouter({
  routes
})

export default router

and i imported this router object in to my-shell's main.js like below :

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

and inside my-shell's index.html i added tags (inside )to load my micro apps buid (my-admin.js file) like below :

 <script src="../assets/my-admin/dist/my-admin.js"></script>
 <script src="../assets/other-microapps/dist/micro-app.js"></script>

But when i am starting my-shell application . it is throwing below error :

Uncaught TypeError: Cannot redefine property: $router.

What can I do to get rid of this error?

回答1:

I've not tried recreatting this scenario, however I can spot the obvious reason why it doesn't work.

Lets briefly look at what happens when you launch an SPA.

Router's are initialize at the beginning, i.e new Vue() and your sub-apps are attached midway i.e on the Dom Rerender, following this sequence, you can't jump from mid-app back to the top without breaking things either the initial router is discarded or the new one is rejected.

My advice:

Don't use vue-router in your subapps (web components), use a lightweight code to handle routing.

In my experience doing micro-frontend architecture, the whole goal is to stick to the SOLID pattern as much as possible. If your sub-apps are complex to the extent that they require vue-router for routing, then you're not doing it right*.

Typically, a sub-app should be such that does only one thing.

e.g In a business SaaS software for example, A customer micro app is only responsible for