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. https://www.cnblogs.com/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);
}