qiankun常见问题集合：主子应用间路由跳转、微应用如何设置跨域访问、各生命周期钩子如何执行、应用内路由跳转报错：Failed to execute 'replace' on 'Location'

一、qiankun框架中微应用之间如何跳转

　　qiankun框架提供两种跳转方式：

1、通过history.pushState()方式进行跳转

<button onClick={() => {
    window.history.pushState({
       user: {......}
     }, '', '/app1')}
 }>跳转</button>

2、将主应用的路由实例传递给子应用，子应用使用主应用实例进行跳转。

二、微应用需要支持跨域访问

　　遇到这样报错：Access to fetch at ‘http://localhost:3000/’ from origin ‘http://localhost:8000’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.

　　由于qiankun框架 解析微应用使用 import-html-entry库通过fetch请求相关资源，所以需要微应用支持跨域访问；在webpack devServer中加入以下代码即可

headers: {
　　'Access-Control-Allow-Origin': '*'
},

三、微应用对应生命周期钩子函数具体是做啥的

1、遇到报错：loader.js:220 Uncaught (in promise) Error: [qiankun] You need to export lifecycle functions in app4 entry

　　此问题是由于微应用中没有暴露qiankuan的生命周期；需要在微应用工程中加入相关的生命周期函数；具体位置应为微应用中webpack的entry 值指向的js文件中添加即可；

2、qiankun 各生命周期钩子是做什么的

（1）bootstrap：只会在微应用初始化的时候调用一次，下次微应用重新进入时会直接调用 mount 钩子，不会再重复触发 bootstrap。通常我们可以在这里做一些全局变量的初始化，比如不会在 unmount 阶段被销毁的应用级别的缓存等。

（2）mount：应用每次进入都会调用 mount 方法，通常我们在这里触发应用的渲染方法。

（3）unmount：应用每次 切出/卸载 会调用的方法，通常在这里我们会卸载微应用的应用实例。

　　主要了解这 3 种，然后需要清楚是如何执行的，这样就可以将对应业务放到合适的钩子函数里。

四、应用内路由跳转报错：Failed to execute 'replace' on 'Location'

　　报错如下：vue-router.esm-bundler.js?6c02:552 Uncaught (in promise) DOMException: Failed to execute 'replace' on 'Location':

　　最后原因如下：有 2 个 route 的 name 是一样的，就会报上面的错误，改成不一样即可。

　　当路由是 同一个 name 时，后面的会覆盖前面的，所以 路由 /console/partner 总是 跳转到 /404。