1. qiankun 遇到的問題

// vue3 + qiankun 項目改造遇到的問題
// 1. 獲取當前路由，使用 useRoute 或者 useRouter 直接獲取或者刷新頁面拿到的是 / , 只有在 watch 和 watchEffect 中監聽才能拿到當前路由
// 2. 路由配置name不能相同, 相同會加載不出來

// vueRouter momery 模式 https://blog.csdn.net/qq_40282016/article/details/116990426

// qiankun 問題
// 1. 在 start 方法中可以通過自己實現的 fetch 方法攔截有問題的腳本
start({
async fetch(url, ...args) {
if (url === 'http://to-be-replaced.js') {
return {
async text() {
return '';
},
};
}

return window.fetch(url, ...args);
},
});
// 2. 靜態資源必須支持跨域，qiankun 是通過 fetch 拉取資源的
// 3. qiankun 可以同時激活兩個微應用嗎？【可以】，
但是history模式和hash模式下，頁面只能同時顯示一個微應用的頁面，因為qiankun是基于路由的，一個頁面只對應一個路由
momery 路由模式下可以一個頁面顯示多個路由對應的頁面。對應vue-router 使用 abstract 模式，react-router 使用 memory history 模式
https://lequ7.com/guan-yu-vuejsvue-ji-yu-abstract-lu-you-mo-shi-shi-xian-ye-mian-nei-qian.html
// 4. 提取公共依賴
// 1. 主應用中導入依賴，子應用中配置 external
// 2. 主應用導入，通過props傳遞給子應用。子應用在鉤子函數中接收。比如Amap
// 5. 子應用之間相互跳轉
--1. vue2 跳轉需要把主應用的路由實例傳遞給子應用，子應用調用跳轉
--2. vue3 使用 useRouter() 直接可以跳轉
// 6. 微應用文件更新之后，訪問的還是舊版文件
-- 服務器需要給微應用的 index.html 配置一個響應頭：Cache-Control no-cache
// 7. 部署問題：
--1. 主應用和子應用部署到同一個IP和端口號怎么處理？
解決：1. 必須配置 webpack 構建時的 publicPath 為目錄名稱。
2. history 路由的微應用需要設置 base ，值為目錄名稱，用于獨立訪問時使用。

// 8. http://www.rzrgm.cn/synY/p/13969785.html

// momery 路由原理示例

const app = document.querySelector("#app");

const div1 = document.createElement("div");
div1.innerHTML = "1";
const div2 = document.createElement("div");
div2.innerHTML = "2";
const div3 = document.createElement("div");
div3.innerHTML = "3";
const div4 = document.createElement("div");
div4.innerHTML = "4";
const routeTable = {
  // 表驅動編程,這樣寫了HTML里面就不需要div了
  "/1": div1,
  "/2": div2,
  "/3": div3,
  "/4": div4
};

window.localStorage.setItem("routeTable", JSON.stringify(["/1", "/2", "/3"]));

function route(container) {
  // 獲取number，把所有信息存在xxx里面
  let routeArrs = JSON.parse(window.localStorage.getItem("routeTable"));
  // console.log(routeArrs);
  routeArrs.forEach((number) => {
    let div = routeTable[number.toString()];
    //保底頁面
    if (!div) {
      div = document.querySelector("#div404");
    }

    div.style.display = "block";

    //展示頁面
    // container.innerHTML = "";
    container.appendChild(div);
  });
  // if (!number) {
  //   number = "/1";
  // }

  // 獲取到div
  // let div = routeTable[number.toString()];
  // //保底頁面
  // if (!div) {
  //   div = document.querySelector("#div404");
  // }

  // div.style.display = "block";

  // //展示頁面
  // container.innerHTML = "";
  // container.appendChild(div);
}

// 獲取到所有class為link的a標簽
const allA = document.querySelectorAll("a.link");
// 遍歷a標簽
for (let a of allA) {
  a.addEventListener("click", (e) => {
    // 阻止默認事件，不要自動刷新
    e.preventDefault();
    const href = a.getAttribute("href");
    // 存入href到xxx
    window.localStorage.setItem("xxx", href);
    // 通知變化
    onStateChange(href);
  });
}

route(app);

function onStateChange() {
  console.log("state 變了");
  // 之前的代碼再重復一次
  route(app);
}

posted @ 2022-09-08 14:21 monkey-K 閱讀(1390) 評論(0) 收藏舉報

刷新頁面返回頂部

monkey-K

1. qiankun 遇到的問題

公告