Javascript 微型前端/Web组件/Vue路由器错误：未捕获类型错误：无法重新定义属性：$Router

我遇到了一个问题，以下是场景：

我开发了一个vue应用程序（我的管理微应用程序），它有4-5个屏幕/组件（管理用户、管理通知、管理角色等），我创建了一个router.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')

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

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

最后，我将我的这个微应用程序包装为main.js中的web组件（MainLayout组件），如下所示：

const myAdmin = wrap(Vue,MainLayout)

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

i使用以下命令构建此微型应用程序：

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

这就是这个微型应用程序的全部内容如果我单独运行这个微应用程序，它会运行得非常完美。

但是在我的场景中，我有一个shell应用程序（我的shell），它只在Vue中开发。这个shell应用程序也有自己的vue路由器，并在其main.js中导入，如下所示：

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

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

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

。外壳路由器：

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

我将这个路由器对象导入到我的shell的main.js中，如下所示：

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

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

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

而在我的shell的index.html中，我添加了标签（内部）来加载我的微应用程序buid（my-admin.js文件），如下所示：

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

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

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

---

我能做些什么来消除这个错误？

我还没有尝试重新创建这个场景，但是我可以找到它不起作用的明显原因

让我们简单地看一下当你启动水疗时会发生什么。

路由器在开始时初始化，即

new Vue（）

，并且您的子应用程序在中间连接，即在Dom Rerender上，按照此顺序，您不能从中间应用程序跳回到顶部而不破坏任何东西，要么丢弃初始路由器，要么拒绝新路由器

我的忠告是:

不要在子应用程序（web组件）中使用vue路由器，请使用轻量级代码来处理路由。 根据我在微前端架构方面的经验，整个目标是尽可能地坚持实体模式。如果您的子应用程序非常复杂，需要vue路由器进行路由，那么您做得不对*

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

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

创建新客户（弹出模式）

上市客户

查看单个客户的交易报告

编辑客户信息（弹出模式）

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

---

只有2和3需要路由，我们用

v-if

语句处理了这一点。

你是正确的，但我的整个应用程序都是非常大规模的应用程序，每个微应用程序都是复杂的应用程序，而不是简单的单一用例web组件。然后我认为你实现它是错误的。如果每个子应用程序都非常复杂，您需要一个路由系统，那么不应该将每个子应用程序部署为web组件。更好的方法是使用piral.io或。它们的设置有点复杂，但是会给你你想要的灵活性。你能解决这个问题吗？或者你有没有找到解决办法？