【qiankun微前端】已有工程改造微前端

最初接触微前端有种高大上的感觉,细细研究了一下,其实也不难,本文就不介绍iframe,single-spa之类的东西了,直奔主题。

当前系统有横向一级顶部路由和竖向二级侧面路由,点击一级路由会触发二级路由的切换,从而实现两级路由的切换。

之所以采用微前端,是因为我们的工程有太多冗余第三方代码,因此为第三方用户开辟一个单独的工程势在必行,所以说微前端也是为了我们主体仓库代码的干净。

主应用路由(router.js)配置,增加sub项

        {path: "/micro/*",name: "micro",component: Home,// Home一般为包含上部和左侧路由的layout组件redirect: "/",meta: {auth: false, // 是否需要登录keepAlive: false // 是否缓存组件},children: [{path: "/",name: "sub",component: () => import('@/views/sub.vue'),// 当路由点击时,链接到sub组件meta: {auth: true,keepAlive: false}}]},

主应用sub.vue(当路由点击时,打开的子应用页面)

<template><div class="layout"><Layout class="main_view"><!-- micros为定义的微应用挂载dom的id --><div id="micros" class="views"></div></Layout></div>
</template><script>
import '@/micros' // 触发微应用的注册和主应用的数据监听等逻辑
import {start} from "qiankun";
import API from '@/api/apv';
import {mapActions
} from "vuex";export default {name: "micros",created() {start()},mounted() {this.signingReminder()this.$nextTick(()=>{// 此逻辑为了解决主应用在子应用路由下直接刷新导致的路由不展示的问题;// 当前子页面的mounted周期,对左侧路由进行store数值更新,并进行refreshList刷新操作(这里的逻辑视自己工程具体情况而定,核心思路是一致的)。this.comeSetListArrQiankun([{"name": "仓库管理","path": "/micro/thirdPartyStore","showChild": 0,"tabType": 600,"type": "third_party_supplier","child": [{"name": "入库管理sub","path": "/micro/thirdPartyStore/stock","signColor": 6000,"type": "third_party_supplier","child": 1},{"name": "库存管理sub","path": "/micro/thirdPartyStore/inventory","signColor": 6001,"type": "third_party_supplier","child": 1},{"name": "出库管理sub","path": "/micro/thirdPartyStore/outbound","signColor": 6002,"type": "third_party_supplier","child": 1},]}])// 路由更新需要主动触发refreshList,刷新视图this.$parent.$parent.$refs.PageHeader.$emit('refreshList')})},methods: {...mapActions("index",['comeSetListArrQiankun']),signingReminder() {// 当前页面的其他逻辑},}
}
</script>

micros中的apps.js

import store from '@/store/index'
import {registerMicroApps} from "qiankun";
const apps = [/*** name: 微应用名称 - 具有唯一性* entry: 微应用入口 - 通过该地址加载微应用* container: 微应用挂载节点 - 微应用加载完成后将挂载在该节点上* activeRule: 微应用触发的路由规则 - 触发路由规则后将加载该微应用*/{name: "micro",entry: "http://127.0.0.1:8889/sub/micro/",container: "#micros",activeRule: "/mono/micro/",props: {}},
];
export default apps;

micros中的index.js

import { registerMicroApps, initGlobalState, addGlobalUncaughtErrorHandler, start } from "qiankun";
import apps from "@/micros/apps";
import store from '../store/index'
/*** @description: 注册微应用* 第一个参数 - 微应用的注册信息* 第二个参数 - 全局生命周期钩子*/
registerMicroApps(apps,{beforeLoad: [async (app) => {}],beforeMount: [app => {//console.log("subdata",app)//console.log('[LifeCycle] before mount %c%s', 'color: green;', app.name);},],afterMount: [app => {//console.log("subdata",window)//console.log('[LifeCycle] before mount %c%s', 'color: green;', app.name);},],afterUnmount: [app => {//console.log('[LifeCycle] after unmount %c%s', 'color: green;', app.name);//location.reload(true)},],}
);// 初始化 state
const actions = initGlobalState({menus: []});
// 主应用监听路由列表传递,一旦传递过来通过主应用自身的store进行路由设置
actions.onGlobalStateChange((state, prev) => {// state: 变更后的状态; prev 变更前的状态store.dispatch('index/comeSetListArrQiankun', state.menus);
});addGlobalUncaughtErrorHandler((event) => {const { msg } = event;if (msg && msg.includes('died in status LOADING_SOURCE_CODE')) {console.log('加载失败');}
});// start();

子应用main.js

import './public-path';
import Vue from 'vue'
import App from './App.vue'
import router from './router/index'
import store from './store/index'
import ViewUI from 'view-design';
import VueClipboard from 'vue-clipboard2';
import VueJsonp from 'vue-jsonp';
import debounce from './mixins/debounce';   // 全局防抖
import 'view-design/dist/styles/iview.css';
import installTrimDirective from '@/utils/trimDirective'
import * as _ from 'lodash'
import PerfectScrollbar from 'vue2-perfect-scrollbar'
import 'vue2-perfect-scrollbar/dist/vue2-perfect-scrollbar.css'
import menus from '@/store/modules/index/_types_thirdPartyStore'
Vue.prototype.$_ = _
window.sharedData = 'Hello from subapp';Vue.use(PerfectScrollbar);
Vue.use(VueJsonp)
Vue.use(ViewUI);
Vue.use(VueClipboard)
Vue.mixin(debounce)
Vue.prototype.$bus = new Vue()
Vue.use(installTrimDirective) // * 全局去空格 v-trim// 阻止启动生产消息
Vue.config.productionTip = falselet instance = null;
function render(props = {}) {instance = new Vue({el: '#app', // 这里应该替换为你实际的挂载点router,render: (h) => h(App),created() {}})
}if (!window.__POWERED_BY_QIANKUN__) {render()
} else {}export async function bootstrap(props) {}export async function mount(props) {props.onGlobalStateChange((state) => {console.log('子应用接收的参数', state)}, true)props.setGlobalState({menus}) // 当子应用挂载完毕,子应用设置左侧路由数据给主应用if (!instance) {render();}
}export async function unmount() {if (instance) {// 卸载 Vue 实例instance.$destroy();instance.$el.innerHTML = '';instance = null;}
}

注意:

  1. 工程中的token传递也可以通过initGlobalState时,传递给子应用,也可以通过挂载到localstorage上,由工程总体共用。
  2. 暂时未进行样式隔离等需求,待后续验证

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/874919.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

积木报表-自定义报表

文章目录 一、springboot初始项目集成积木报表二、springboot正式项目集成积木报表注意点注意点1&#xff1a;依赖下载失败原因&#xff1a;Maven私服设置注意点2&#xff1a;dependency在【springboot初始项目集成积木报表】情况下不要放在根目录的pom里&#xff0c;放子模块的…

前端实现自定义表单组件开发

1、组件介绍 自定义表单,表单上的字段、输入控件、验证规则、数据结构等可动态设置。 2、接口数据介绍 [{"condition_type":13,"condition_name":"发送者匹配模式","setting":{"base_filed":{"fields":[{&quo…

代码随想录训练营第四十七天 647回文子串

第一题&#xff1a; 原题链接&#xff1a;647. 回文子串 - 力扣&#xff08;LeetCode&#xff09; 思路&#xff1a; dp[i][j]的含义&#xff1a;表示从i到j之间的子串是否是回文子串。 那么考虑三种情况: 在s[i] s[j]的前提下&#xff1a; 如果i j说明当前是一个元素&a…

【Python系列】详解 open 函数:文件操作的基石

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

QEMU入门

文章目录 下载qemu源码安装依赖软件kernel编译qemu编译安装python依赖软件 编译 下载qemu源码 git clone https://github.com/qemu/qemu.git 安装依赖软件 kernel编译 apt install pkg-config apt install gcc apt install libglib2.0-dev apt install libncurses-dev apt …

C# 委托函数 delegate

在C#中&#xff0c;委托&#xff08;Delegate&#xff09;是一种特殊的类型&#xff0c;它可以持有对方法的引用。 委托是实现事件的基础。事件本质上是多播委托&#xff0c;允许多个方法被触发 委托允许你将方法作为参数传递给其他方法&#xff0c;或者将方法作为返回值从方法…

Unity 之 【Android Unity 共享纹理】之 Android 共享图片给 Unity 显示

Unity 之 【Android Unity 共享纹理】之 Android 共享图片给 Unity 显示 目录 Unity 之 【Android Unity 共享纹理】之 Android 共享图片给 Unity 显示 一、简单介绍 二、共享纹理 1、共享纹理的原理 2、共享纹理涉及到的关键知识点 3、什么可以实现共享 不能实现共享…

fomo3d是什么

目录 fomo3d是什么 一、Fomo3D概述 二、Fomo3D的玩法 三、Fomo3D的资金流向 四、举例说明 fomo3d是什么 Fomo3D是一款在以太坊网络上运行的去中心化资金盘游戏,也是一款基于智能合约的区块链游戏。以下是对Fomo3D的详细说明,包括其特点和举例说明: 一、Fomo3D概述 定义…

运维 | 清理 Linux 磁盘空间方法汇总

清理 Linux 磁盘空间方法汇总 前言 系统磁盘不够用或占满了&#xff0c;导致部分应用或程序无法正常使用。 本章节将记录一些常用或常见的方法清理系统磁盘&#xff08;持续更新中&#xff09;。 常见操作 查看磁盘使用情况 cd / df -Th查找大文件和目录&#xff08;根目…

微服务安全——SpringSecurity6详解

文章目录 说明SpringSecurity认证快速开始设置用户名密码基于application.yml方式基于Java Bean配置方式 设置加密方式自定义用户加载方式自定义登录页面前后端分离认证认证流程 SpringSecurity授权web授权:基于url的访问控制自定义授权失败异常处理方法授权:基于注解的访问控制…

沐风老师3DMAX一键烘焙插件使用方法

3DMAX一键烘焙插件使用教程 3DMAX一键烘焙插件&#xff1a;从3dMax2021增加了一个新功能是全新的BakingToTexture&#xff08;烘焙到纹理&#xff09;工具。s3DMAX一键烘焙插件是新BakingToToTorTexture的简化前端。它允许用户一键烘焙某些实用程序映射&#xff08;贴图&#x…

MySQL 数据表

InnoDB存储引擎文件 InnoDB存储引擎相关的文件包括重做日志文件、表空间文件。 表空间文件 InnoDB存储引擎在设计上模仿了Oracle&#xff0c;将存储的数据按表空间进行存放。默认配置下&#xff0c;会有一个初始化大小为10MB、名为ibdata1的文件&#xff0c;该文件就是默认的…

FlutterFlame游戏实践#16 | 生命游戏 - 编辑与交互

theme: cyanosis 本文为稀土掘金技术社区首发签约文章&#xff0c;30天内禁止转载&#xff0c;30天后未获授权禁止转载&#xff0c;侵权必究&#xff01; Flutter\&Flame 游戏开发系列前言: 该系列是 [张风捷特烈] 的 Flame 游戏开发教程。Flutter 作为 全平台 的 原生级 渲…

liunx 挂载硬盘以及自启挂载

一、确认硬盘已连接并识别 查看硬盘设备名称&#xff1a; 使用lsblk或fdisk -l命令查看系统中的硬盘设备名称。这些名称通常类似于/dev/sda、/dev/sdb等。 二、创建挂载点 选择或创建挂载点目录&#xff1a; 挂载点是一个目录&#xff0c;用于将硬盘连接到文件系统的特定位…

Jenkins卡在等待界面解决方法

一、问题 部署jenkins服务器出现Please wait while Jenkins is getting ready to work。 二、原因分析 jenkins里面文件指向国外的官网&#xff0c;因为防火墙的原因连不上。 三、解决方法 将配置文件里面的url换成国内镜像&#xff1a; &#xff08;1&#xff09;修改配…

LLM模型与实践之基于 MindSpore 实现 BERT 对话情绪识别

安装环境 # 该案例在 mindnlp 0.3.1 版本完成适配&#xff0c;如果发现案例跑不通&#xff0c;可以指定mindnlp版本&#xff0c;执行!pip install mindnlp0.3.1 !pip install mindnlp 模型简介 BERT是一种由Google于2018年发布的新型语言模型&#xff0c;它是基于Transforme…

css黑色二级下拉导航菜单

黑色二级下拉导航菜单https://www.bootstrapmb.com/item/14816 body { font-family: Arial, sans-serif; margin: 0; padding: 0; }nav { background-color: #000; /* 导航背景色为黑色 */ }.menu { list-style-type: none; margin: 0; padding: 0; overflow: hidden; }.menu l…

JavaScript(12)——内置对象

JavaScript内部提供的对象&#xff0c;包含各种属性和方法给开发者调用。 Math Math对象是JavaScript提供的一个“数学”对象 包含的方法有&#xff1a; random:生成0-1之间的随机数 ceil&#xff1a;向上取整 floor&#xff1a;向下取整 max&#xff1a;找最大数 min&#…

展馆导览系统架构解析,从需求分析到上线运维

在物质生活日益丰富的当下&#xff0c;人们对精神世界的追求愈发强烈&#xff0c;博物馆、展馆、纪念馆等场所成为人们丰富知识、滋养心灵的热门选择。与此同时&#xff0c;人们对展馆的导航体验也提出了更高要求&#xff0c;展馆导览系统作为一种基于室内外地图相结合的位置引…

java list.stream处理对象集合,根据模糊匹配、IN操作来过滤

在Java中&#xff0c;如果你有一个机构对象&#xff08;比如Agency&#xff09;的集合&#xff0c;并且你想根据机构名称的模糊匹配、机构类型以及机构ID的IN操作来过滤这个集合&#xff0c;你可以使用Java 8及以上版本的Stream API来实现。不过&#xff0c;对于机构ID的IN操作…