qiankun子应用内部路由该如何实现

在 Qiankun 中，子应用内部路由的实现方式，主要有两种：

1. 子应用使用自己的路由系统：子应用可以使用自己的路由系统，例如 Vue Router、React Router 等，在子应用中完成路由跳转和页面渲染。这种方式下，主应用只需要将子应用加载到指定的容器中，不需要关心子应用内部的路由实现。

2. 子应用使用主应用的路由系统：子应用可以使用主应用的路由系统，例如主应用使用 Vue Router 实现路由，子应用可以使用 Vue Router 进行路由跳转和页面渲染。这种方式下，主应用需要将子应用加载到指定的容器中，并且在主应用的路由表中配置子应用的路由规则。

下面是第二种方式的代码示例：

首先，我们需要在主应用的路由表中配置子应用的路由规则：

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

Vue.use(VueRouter);

const routes = [
  {
    path: '/app1',
    component: () => import('@/views/App1.vue'),
    children: [
      {
        path: '/app1/page1',
        name: 'page1',
        component: () => import('app1/Page1.vue'),
      },
      {
        path: '/app1/page2',
        name: 'page2',
        component: () => import('app1/Page2.vue'),
      },
    ],
  },
];

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

export default router;

在上述代码中，我们在主应用的路由表中定义了 `/app1` 的路由规则，并配置了两个子路由 `/app1/page1` 和 `/app1/page2`，子路由的组件分别位于子应用 `app1` 中的 `Page1.vue` 和 `Page2.vue`。

然后，在子应用中，我们需要使用 `history` 模式，并在路由模式中加上子应用的前缀，例如 `/app1`：

import Vue from 'vue';
import VueRouter from 'vue-router';
import App from './App.vue';

Vue.config.productionTip = false;

let instance = null;

function render(props = {}) {
  const { container, routerBase } = props;

  const router = new VueRouter({
    base: window.__POWERED_BY_QIANKUN__ ? routerBase : '/',
    mode: 'history',
    routes: [
      {
        path: '/app1/',
        component: App,
        children: [
          {
            path: 'page1',
            name: 'page1',
            component: () => import('./views/Page1.vue'),
          },
          {
            path: 'page2',
            name: 'page2',
            component: () => import('./views/Page2.vue'),
          },
        ],
      },
    ],
  });

  instance = new Vue({
    router,
    render: (h) => h(App),
  }).$mount(container ? container.querySelector('#app') : '#app');
}

if (!window.__POWERED_BY_QIANKUN__) {
  render();
}

export async function bootstrap() {}

export async function mount(props) {
  render(props);
}

export async function unmount() {
  instance.$destroy();
  instance = null;
}

在上述代码中，我们在子应用中定义了路由规则，并使用 `history` 模式进行路由跳转和页面渲染。在 `render` 函数中，我们使用 `routerBase` 参数来设置子应用的前缀，例如 `/app1`，这样就可以在主应用中正确加载子应用的路由规则了。

通过以上配置，我们就可以在 Qiankun 中实现子应用内部路由的跳转和页面渲染了。需要注意的是，在实现子应用内部路由时，需要确保子应用和主应用的路由模式、路由规则等设置一致，以避免出现路由冲突和页面加载错误等问题。