嘿，兄弟们，今天咱们来聊聊 qiankun 微前端里那个让人又爱又恨的话题——应用间页面跳转。说实话，这玩意儿一开始我也觉得挺简单的，不就是跳个页面嘛，后来才发现，坑可真不少，哈哈。

你想想啊，单体应用的时候，路由dou是一个 Vue Router 或者 React Router 管着，跳转啥的dou是一家人，随便跳。可到了微前端，每个子应用dou是独立部署的，有自己的路由实例，这就尴尬了。

你要是直接用 window.location.href 去跳，那页面就整个刷新了状态全没了体验直接拉胯。咱Zuo前端的，不就是为了用户体验好吗？害，这哪是跳转，简直是“重启人生”。

其实 qiankun 官方给了我们一个hen优雅的思路：主应用统一管理路由，子应用只负责“提需求”。说白了就是主应用是“领导”，子应用是“员工”，员工想跳转，得先打报告给领导，领导来操作。

这事儿在技术上叫“依赖注入”或者“控制反转”，听着高大上，其实就一个意思：你别自己瞎跳，我给你个接口，你调我给你的方法就行。

主应用在注册子应用的时候，Ke以传 props。啥是 props？你Ke以理解成“工具包”，里面Ke以放各种主应用的Neng力，比如路由实例、跳转方法、全局状态啥的。

比如这样：

props: {
  mainNavigate:  => {
    console.log;
    Router.push;
  }
}

子应用拿到这个 mainNavigate 方法，想跳哪就调哪个，不用管浏览器地址栏，也不用担心页面刷新。你懂的，这体验才叫丝滑。

hen简单，子应用在 mount 生命周期里拿到 props，然后存起来组件里直接调用就行。

比如：

window.props.mainNavigate;

你kan，多简单。不对不对，应该是多优雅！

这个也一样，主应用统一调度。比如你想从 A 应用跳到 B 应用的某个页面你只需要调用主应用给你的跳转方法，传个路径就行。主应用会帮你切换到对应的子应用，加载对应的页面。

比如：

window.props.mainNavigate;

主应用收到这个路径，就会去加载 app-b，然后跳到 page1。整个过程无刷新，状态保留，体验拉满。

比如子应用 token 过期了接口报错了这时候要跳主应用的登录页。你不Neng自己跳，因为你是子应用，你跳了页面就乱了。

所以主应用Ke以传一个登录方法给子应用，子应用在 token 失效的时候调用这个方法就行。

比如：

props: {
  goToLogin:  => {
    Router.push;
  }
}

子应用里：

if  {
  window.props.goToLogin;
}

你kan，多清晰。主应用统一控制，子应用只管调用，不越权，不混乱。

比如子应用跳主应用的时候，主应用的样式可Neng还没加载完，页面会闪一下。这时候你得加点容错处理，比如 loading 动画，或者等主应用资源加载完再跳。

还有，a 标签跳转虽然简单，但会刷新页面状态全没了咱不推荐。除非你就是想刷新，那就当我没说。

qiankun 里跳转的核心思想就是：主应用统一调度，子应用只提需求。这样既保证了体验，又避免了混乱。

你要是直接跳页面那 qiankun 就白用了。咱Zuo微前端，不就是为了体验好吗？

所以别再用 location.href 乱跳了来用主应用给你的Neng力，跳得优雅点，跳得专业点，跳得像个老司机。

咱就是说微前端跳转，不是跳得快就行，是要跳得稳，跳得有格局。哈哈。