微前端/ Web组件/ Vue路由器错误:未定义的TypeError:无法重新定义属性：$router
我提出了一个问题，以下是情况：
我开发了一个vue应用程序(my微应用程序)，它有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')最后，我将我的这个微型应用程序包装为web组件(MainLayout组件)，在main.js中如下所示：
const myAdmin = wrap(Vue,MainLayout)
window.customElements.define('my-admin', myAdmin)我使用以下命令构建这个微型应用程序：
"build": "vue-cli-service build --target wc --name my-admin ./src/main.js",这就是这个微型应用程序的全部。如果我单独运行这个微型应用程序，和它运行得很完美。
但是在我的场景中，我有一个shell应用程序( my )，它只在Vue中开发。这个shell应用程序还拥有自己的路由器，并在其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我将这个路由器对象导入到我的shell的main.js中，如下所示：
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')在my的index.html中添加了标记 (inside )来加载我的微应用程序- buid (my-admin.js文件)，如下所示：
<script src="../assets/my-admin/dist/my-admin.js"></script>
<script src="../assets/other-microapps/dist/micro-app.js"></script>，但当我启动-shell应用程序时。它在错误下面抛出：
Uncaught TypeError: Cannot redefine property: $router. 我能做些什么来消除这个错误？
回答 1
Stack Overflow用户
发布于 2020-02-02 10:52:57
我还没有尝试重新创建这个场景，但是我可以找出它不起作用的明显原因。
让我们简要地看看当您启动SPA时会发生什么。
路由器的初始化在一开始，即new Vue()和您的子应用程序连接在中间，即在Dom Rerender上，按照这个顺序，您不能从中间的应用程序跳回顶部，除非破坏一些东西，要么初始路由器被丢弃，要么新的路由器被拒绝。
我的建议是：
不要在您的子应用程序(web组件)中使用vue-路由器，使用轻量级代码来处理路由。
在我做微前端建筑的经验中，整个目标是尽可能地坚持坚实的模式。如果您的子应用程序复杂到需要vue路由器进行路由的程度，那么您做得不对*。
通常，一个子应用程序应该只做一件事。
例如，在商业SaaS软件中，客户微型应用程序只负责
创建新客户(弹出模式) Customers
- Viewing
- 列出单个客户的事务report
- Editing客户信息(弹出模式)
处理客户付款、债务和复杂的图表报告都由另一个子应用程序处理。
只有2和3需要路由，我们使用v-if语句来处理。
https://stackoverflow.com/questions/60024245
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号