1. qiankun 遇到的问题

2022-09-08 14:32:50 阅读：193 来源： 互联网

// 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

标签：问题,遇到,--,qiankun,应用,跳转,路由,页面
来源： https://www.cnblogs.com/monkey-K/p/16669289.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

1. qiankun 遇到的问题