页面大纲

History 模式子应用

微前端基座支持 History 路由模式, 需要将 routeMode 设置为 history：

const { defineConfig } = require('@vue/cli-service');
const { defineMappChild } = require('@wakeadmin/vue-cli-plugin-mapp-child');

module.exports = defineConfig({
  transpileDependencies: false,
  pluginOptions: {
    ...defineMappChild({
      mapp: {
        activeRule: '/my-app',
        routeMode: 'history',
      }
    }),
  }
});

当 routeMode 为 history 时，基座不会将下级菜单当做 hash 路径进行拼接。

Vue 2 路由配置示例

import VueRouter from 'vue-router';
import bay from '@wakeadmin/bay';
import { urlJoin } from '@wakeadmin/utils';

const router = new VueRouter({
  mode: 'history',
  // 设置基础路径
  base: bay.isMicroApp ? urlJoin(bay.getBayBaseUrl(), '/my-app') : '/my-app',
  routes: [
    /*...*/
  ],
});

Vue 3 路由配置示例

import { createRouter, createWebHistory } from 'vue-router';
import bay from '@wakeadmin/bay';
import { urlJoin } from '@wakeadmin/utils';

const router = createRouter({
  history: createWebHistory(bay.isMicroApp ? urlJoin(bay.getBayBaseUrl(), '/my-app') : '/my-app'),
  routes: [
    //...
  ],
});