一、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。