У меня возникла проблема. Ниже приведен сценарий:
Я разработал приложение vue (микро-приложение my-admin) , которое имеет 4 - 5 экранов / компонентов. (управлять пользователем, управлять уведомлениями, управлять ролями и т. д. c), и я создал маршрутизатор. 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')
и наконец я обертываю это микро-приложение как веб-компонент (компонент MainLayout) в main. js как показано ниже:
const myAdmin = wrap(Vue,MainLayout)
window.customElements.define('my-admin', myAdmin)
i build это микро приложение со следующей командой:
"build": "vue-cli-service build --target wc --name my-admin ./src/main.js",
вот и все для этого микро приложения. и он работает отлично, если я запускаю это микро-приложение по отдельности.
Но в моем сценарии у меня есть приложение оболочки (my-shell), которое разработан только в Vue. и это приложение оболочки также имеет свой собственный маршрутизатор *1033* и импортируется в основной файл. 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
и i импортировали этот объект маршрутизатора в основную часть my-shell. js как показано ниже:
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
и внутри индекса my-shell. html я добавил теги (внутри), чтобы загрузить мои микро приложения (файл 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.
Что я могу сделать, чтобы избавиться от этой ошибки?