v3

这个例子展示了在umi3.x中如何应用 stillness-component, 通过重写底层渲染插件, 来改造 switch 从而达到一致的效果

现在这已经是一个公开的包了,只需要:

yarn

yarn add umi-plugin-stillness

npm

npm install umi-plugin-stillness

pnpm

pnpm add umi-plugin-stillness

其中, 因为针对IRoute做了一定的改造,当 routes 中带上了 stillness 时,才会变为缓存的页面

使用说明:

.umirc.ts

import { defineConfig } from 'umi';

export default defineConfig({
  nodeModulesTransform: {
    type: 'none',
  },
  routes: [
    {
      exact: false,
      path: '/',
      component: '@/layouts/index',
      routes: [
        {
          exact: false,
          path: '/home',
          component: '@/pages/home',
          stillness: true,
          routes: [
            {
              path: '/home/a',
              component: '@/pages/a',
              stillness: true,
            },
          ],
        },
        { path: '/about', component: '@/pages/about', stillness: true },
        { path: '/list', component: '@/pages/list' },
      ],
    },
  ],
  stillness: {},
});

同时, stillness-component 常用api已通过 umi 直接 import:

import { Offscreen,StillnessIRoute } from 'umi';