微前端应用路由(3/3)
2021-09-06 14:16:10 2 举报
Vue 微前端路由中实现 keep-alive 微应用
作者其他创作
大纲/内容
系统管理 /system
<div id=\"container\"></div>
Layout
http://localhost:4322
<sub-app />
<micro-app v-for=\"x in microApps\" :key=\"x.name\" :name=\"x.name\" :url=\"x.url\" :baseroute=\"x.baseroute\" :data=\"x.data\" ……/>
<div id=\"root\"> <div id=\"menu\">……</div> <div id=\"header\">……</div>
微应用(零件)/parts
<div id=\"footer\">……</div></div>
vue-router
报表管理 /wholesale/report
main-app
micro-app-retail
id=\"app\"
index.html
订单管理/wholesale/index
http://localhost:4321/system/index
component/SubApp
分车管理 /wholesale/subCar
<div> <sidebar /> <div> <navbar /> <global-footer /> </div></div>
http://localhost:4321
<micro-app></micro-app>
micro-app-wholesale
……
零件管理/retail/index
<keep-alive> <router-view /></keep-alive>
微应用(订单)/order
采购管理 /retail/purchaseOrder
Vuex/State
报表管理 /retail/report
Vue.component动态创建组件
microApps
http://localhost:4323
0 条评论
下一页