微前端的概念相信大家都有了解过，微前端就是将一个大型的前端应用拆分成一个基座应用和几个子应用，这种架构在企业中应用的非常广泛，因为企业中的业务往往比较繁多，并且每个业务点需要的功能都比较庞大，所以比较适合微前端这种业务场景
下面我就来介绍下微前端中比较常用的一些东西
基本使用
<micro-app
name="app1"
url="http://localhost:3000/"
baseroute="/page"
></micro-app>
首先，微前端是嵌入到基座项目中去的，你需要使用一个micro-app标签指定嵌入的位置和要嵌入哪个项目，如果你了解过iframe，把它理解成iframe就可以了
下面介绍下必须的三个参数：name，url，baseroute
- name：作为微前端项目的标识，可以理解成项目的
id - url：访问微前端的路径，可以理解成
iframe中的url即可 - baseroute: 基础路由，为了更好的从游览器中的
url的区分微前端项目，建议给每个组件都添加一个baseroute
const router = new VueRouter({
mode: 'history',
base: window.__MICRO_APP_BASE_ROUTE__ || '/',
routes
})
在基座项目中使用的微前端项目，如果设置了baseroute，那么会在子项目的window对象上下方一个__MICRO_APP_BASE_ROUTE__属性，这个属性就是对应的baseroute，这样设置之后就不会影响到原来的项目了
应用之间的跳转
首先，我们必须了解每个项目都是有自己的路由实例的，不同项目之间的路由实例是不会相互影响的，首先我们介绍下在基座中跳转子项目中的路由的方法
// 基座下发跳转指令
import microApp from '@micro-zoe/micro-app'
microApp.setData('子应用name', { path: '/new-path/' })
// 当基座下发跳转指令时进行跳转
window.microApp.addDataListener((data) => {
if (data.path) {
router.push(data.path)
}
})
这里举个例子，方便后续的说明，假设基座项目是在8080端口上启动的，子项目是在3000端口上启动的，子项目下放的baseroute是/page，然后跳转路径设置的是/home，这时候游览器上的路径就是http://localhost:8080/page/home
/home路径对应的路由必须要在子路由中设置，因为相当于还是访问的是子路由中的/page/home路径，游览器上显示只是起一个查看的作用
既然说到了路由就不得不说到vue-router，此时我们千万不要被游览器上的url路径给迷惑到了，你只需要记住上面的一句话就可以，每个项目都是有自己的路由实例的，当你进行路由子项目路由跳转的时候，是和你基座中的路由是没有一定关系的，同时当你子项目中路由跳转的时候，只会关系到子项目中的路由设置，和基座不会有半毛钱的关系
但现在的话会出现一个问题，当我们此时游览器上的路径是/page/home，而当我们刷新页面时会出现页面空白的情况，页面会找不到对应的路径，这也很好理解，因为我们是在基座项目中进行操作的，所以就看基座项目中有没有/page/home对应的路径，没有的话当然就是找不到了
当然，这个也有解决办法，既然项目中没有/page/home的路径，那么我们就添加一个路径就可以了，当然这个路径的组件是不会起到什么渲染作用的，但你可以在他的生命周期中进行子项目的跳转
