@livzon/navigation v1.0.0

Navigation

扩展 history 路由跳转的功能，整个应用关于导航相关的操作都应该使用 navigation

路由跳转案例

// 直接跳转
navigation.push("/url");

// 跳转携带 state
navigation.push("/url", { name: "jack" });

// 跳转携带 query, query 对象会生成 search 字符串，替换原本的 search 字段
history.push({
  pathname: "/url",
  search: "?name=jack&age=20",
});
// vs
navigation.push({
  pathname: "url",
  query: {
    name: "jack",
    age: 20,
  },
});

// 同上
navigation.replace({
  pathname: "url",
  query: {
    name: "jack",
  },
});

// 前进后退
navigation.go(-1);
navigation.goBack();
navigation.goForward();

// 页面跳转保存数据，详情查看下面章节
navigation.pushKeepCache("/url", query);

跳转保存当前路由数据数据

// 1. 组件加载时获取缓存的数据
const cache = navigation.cache.popItem<Cache>(cacheKey);

// 2. 页面跳转之前存储数据
navigation.cache.setItem(cacheKey, data);
navigation.pushKeepCache("/url", query);

// 3. 组件卸载清除
navigation.cache.removeItem(cacheKey);

注意

原有上层业务代码已近被移除。如果有需要可以参照一下方式执行实现跳转到登陆页

/**
 * 导航到登录页面
 * @description 使用 location.href 跳转到登录页，这样会走 nginx 服务器重定向
 */
export function toLoginPage(clear?: boolean, force = false) {
  if (clear) {
    localStorage.removeItem('token')
    localStorage.removeItem('refreshToken')
  }

  if (force || !navigation.history.location.pathname.startsWith('/login')) {
    navigation.history.replace('/login')
  }
  // window.location.href = '/login'
}