vue多模块开发单独打包支持路由跳转

Vue多模块开发可以采用Vue的子应用机制，每个子应用可以独立开发、打包、部署、维护，同时支持路由跳转。

具体实现步骤如下：

1. 创建一个主应用，可以是一个空的Vue项目，作为多个子应用的容器。

2. 创建多个子应用，每个子应用可以是一个独立的Vue项目。

3. 在主应用中安装qiankun（微前端框架），并注册子应用。

4. 在每个子应用中配置路由。

5. 在子应用中安装并配置vue-router。

6. 在子应用中编写路由跳转逻辑。

7. 在主应用中使用qiankun提供的API进行路由跳转。

示例代码：

主应用：

import { registerMicroApps, start } from 'qiankun';

registerMicroApps([
  {
    name: 'app1',
    entry: '//localhost:8081',
    container: '#container',
    activeRule: '/app1',
  },
  {
    name: 'app2',
    entry: '//localhost:8082',
    container: '#container',
    activeRule: '/app2',
  },
]);

start();

子应用：

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

const routes = [
  {
    path: '/page1',
    component: Page1,
  },
  {
    path: '/page2',
    component: Page2,
  },
];

const router = new VueRouter({
  routes,
});

export default router;

子应用路由跳转：

this.$router.push('/page1');

主应用路由跳转：

qiankun.navigateTo({
  appName: 'app1',
  path: '/page1',
});

注意事项：

1. 子应用必须支持跨域访问。

2. 子应用中的路由路径应该与主应用中注册的activeRule路径保持一致。

3. 子应用中的路由跳转应该使用Vue Router提供的API进行跳转。