vue切换路由页面数据缓存_基于数据驱动的前端系统(spa)页面路由设计

interface Road {
   name: string; // 名字
   path: string; // 路径(同层唯一)
   component: React.ComponentType; // 对应的组件
   subRoads?: Road[]; // 下级路由
   permissions?: Set<string> | string[]; // 路由所需要的权限码。规定：如果是数组，权限码之间是且关系；如果是Set则是或关系。二者可互相嵌套，来表达复杂的逻辑关系。
   fallback?: (props: RouteComponentProps) => any; // 遇到无权限时，回退渲染的视图逻辑
   hasHeader?: boolean; // 是否有页面header
   hasSider?: boolean; // 是否有侧边菜单
   visible?: boolean; // 是否可见
}

import { gluer } from 'femo';
import { Road } from '../interface';
import Homepage from './Homepage';
import Cart from './Cart';
 
const initRoad: Road = {
   name: '商城系统',
   path: '/shop',
   component: () => <Redirect to='/shop/homepage'/>,
   permissions: [], // 表示不需要权限
   hasHeader: true, // 页面头部展示 默认展示
   hasSider: true, // 页面菜单展示 默认展示
   visible: true, // 菜单项展示 默认展示
   subRoads: [{
     name: '首页',
     path: '/homepage',
     component: Homepage,
   }, {
     name: '购物车',
     path:  '/cart',
     component: Cart,
   }]
}
 
const shopRoad = gluer(initRoad);
 
export default shopRoad;
 

import { gluer } from 'femo';
import { Road } from './interface';
import shopRoad from './Shop/road';
 
const roadMap = gluer({
   shop: shopRoad(),
})
 
// 设置依赖
// shopRoad的变化会同步到roadMap中
roadMap.relyOn([shopRoad], (roads, state) => {
   return { 
     ...state,
     shop: roads[0] as Road,
   }
});
 
export default roadMap;

import { gluer } from 'femo';
import { Road } from '../interface';
import Homepage from './Homepage';
import Cart from './Cart';
 
const initRoad: Road = {
   name: '商城系统',
   path: '/shop',
   component: () => <Redirect to='/shop/homepage'/>,
   permissions: [], // 表示不需要权限
   hasHeader: true, // 页面头部展示 默认展示
   hasSider: true, // 页面菜单展示 默认展示
   visible: true, // 菜单项展示 默认展示
   subRoads: [{
     name: '首页',
     path: '/homepage',
     component: Homepage,
     hasHeader: false, // 隐藏页面头部（改了这里）
   }, {
     name: '购物车',
     path:  '/cart',
     component: Cart,
   }]
}
 
const shopRoad = gluer(initRoad);
 
export default shopRoad;

useEffect(() => {
    // 挂载的时候去新增一个history路由配置
    shopRoad((_data, state) => {
      const subPaths: Road[] = [...(getSafe(state, 'subPaths') || [])];
      const target = subPaths.find((item) => getSafe(item, 'path') === '/history');
      if (target) return state;
      const history: Road = {
        name: '历史记录',
        path: '/history',
        component: History,
      };
      subPaths.push(history);
      const tmpState = { ...state };
      tmpState.subPaths = subPaths;
      return tmpState;
    });
  }, []);

useEffect(() => {
    // 挂载的时候去删除history路由配置
    shopRoad((_data, state) => {
      const subPaths: Road[] = [...(getSafe(state, 'subPaths') || [])];
      subPaths.find((item, i) => {
        const flag = getSafe(item, 'path') === '/history';
        if (flag) {
          subPaths.splice(i, 1);
        }
        return flag;
      });
      const tmpState = { ...state };
      tmpState.subPaths = subPaths;
      return tmpState;
    });
  }, []);

const [road] = useModel<Road>(shopRoad);
 
  const pathPrefix = getSafe(road, 'path');
  const subPaths: Road[] = getSafe(road, 'subPaths') || [];
  const overlay = (
    <Menu>
      {
        subPaths.map((s) => {
          const path = getSafe(s, 'path');
          const name = getSafe(s, 'name');
          const visible = getSafe(s, 'visible');
          if (visible === false) return null;
          return (
            <Menu.Item key={path}>
              <Link to={`${pathPrefix}${path}`}> {name} </Link>
            </Menu.Item>
          );
        })
      }
    </Menu>
  );