vueqiankun（vue乾坤微前端刷新页面会跳转首页）

Vue微前端框架qiankun简介

## 什么是qiankun？

qiankun是一个基于Vue框架的微前端框架，它可以帮助我们快速搭建并管理多个独立的子应用，同时还提供了基于single-spa的应用路由和生命周期管理机制。qiankun具备了运行时的动态加载和沙箱隔离能力，可以确保子应用之间的代码互相不干扰，同时也可以实现子应用之间的状态共享与通信。

## qiankun的使用步骤

1.安装qiankun

使用npm或者yarn进行安装：

```

npm install qiankun --save

```

或者

```

yarn add qiankun

```

2.创建主应用

在Vue的入口文件中，导入qiankun相关的函数，并注册需要加载的子应用：

```javascript

import { registerMicroApps, start } from 'qiankun';

registerMicroApps([

{

name: 'subapp',

entry: '//localhost:8080',

container: '#subappContainer',

activeRule: '/subapp',

},

]);

start();

```

3.创建子应用

在子应用中，同样需要导入qiankun相关的函数，并注册子应用的生命周期钩子函数和状态共享：

```javascript

import { createApp } from 'vue';

import { createVueApp } from './main';

const app = createVueApp();

// 子应用生命周期钩子

export async function bootstrap() {

console.log('subapp bootstraped');

export async function mount() {

app.mount('#app');

export async function unmount() {

app.unmount();

// 子应用状态共享

export function update() {

// 更新逻辑

```

4.启动应用

在主应用的入口文件中，使用Vue.createApp方法创建应用实例，并调用mount方法进行挂载：

```javascript

import { createApp } from 'vue';

import App from './App.vue';

createApp(App).mount('#app');

```

## qiankun的优势

1.灵活扩展：qiankun提供了插件机制，可以根据业务需求进行扩展，包括动态加载、沙箱隔离、应用通信等功能。

2.独立开发与部署：qiankun支持子应用的独立开发和部署，每个子应用之间可以独立运行和调试，互不干扰。

3.统一路由管理：qiankun基于single-spa提供了统一的路由管理机制，可以实现客户端路由的控制和管理。

4.状态共享与通信：qiankun提供了状态共享和通信的能力，可以实现子应用之间的状态共享和通信。

总结

qiankun是一个功能强大的Vue微前端框架，它通过提供多个子应用的管理和通信机制，让我们可以更方便地进行微前端的开发和维护。通过使用qiankun，我们可以将复杂的前端项目拆分为多个独立的子应用，实现模块化的开发和部署，提升开发效率和项目的可维护性。