javascript - 微前端/Web 组件/Vue 路由器错误 : Uncaught TypeError: Cannot redefine property: $router

Question

我遇到了一个问题，下面是场景:

我开发了 vue 应用(my-admin 微应用)它有 4 - 5 个屏幕/组件(管理用户、管理通知、管理 Angular 色等)，我创建了一个 路由器.js 我写了以下内容:

...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

我在我的 中导入了这个路由器对象main.js 如下所示:

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

最后我 在 main.js 中将我的这个微应用程序包装为 web 组件(MainLayout 组件)如下 :

const myAdmin = wrap(Vue,MainLayout)

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

我 构建 这个带有以下命令的微型应用程序:

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

这就是这个微型应用程序的全部内容。 如果我单独运行这个微应用程序，它运行得很好。

但在我的情况下，我有一个 在 Vue 中开发的 shell 应用程序 (my-shell) 只要。这个shell应用程序也有它的自己的 vue 路由器并在其 main.js 中导入 如下所示:

.外壳路由器:

...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

我 将此路由器对象导入到 my-shell 的 main.js 如下所示:

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

和 在 my-shell 的 index.html 中，我添加了标签 (内部)加载我的微应用程序 buid(my-admin.js 文件)，如下所示:

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

但是当我启动 my-shell 应用程序时。它抛出错误 :

Uncaught TypeError: Cannot redefine property: $router. 

我能做些什么来摆脱这个错误？

Answer 1

我没有尝试重新创建这种情况，但是我可以发现它不起作用的明显原因。

让我们简要看看启动 SPA 时会发生什么。


路由器在开始时初始化，即 new Vue()并且您的子应用程序在中途附加，即在 Dom Rerender 上，按照此顺序，您无法从应用程序中间跳回顶部而不会破坏初始路由器或新路由器被拒绝。

我的建议:

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

根据我做微前端架构的经验，整个目标是尽可能地坚持 SOLID 模式。如果您的子应用程序复杂到需要 vue-router 进行路由，那么您做的不对*。

通常，子应用程序应该只做一件事。

例如，在商业 SaaS 软件中，客户微应用只负责

创建新客户(弹出模式)

列出客户

查看单个客户的交易报告

编辑客户信息(弹出模式)

处理客户付款、债务和复杂的图表报告均由另一个子应用程序处理。

只有 2 和 3 需要路由，我们使用 v-if 处理。陈述。