search

umijs / qiankun

📦 🚀 Blazing fast, simple and complete solution for micro frontends.
https://qiankun.umijs.org
MIT License
15.85k stars 2.02k forks source link

子应用之间第一次路由跳转，vue-router报错 #1245

Open GOGOGOSIR opened 3 years ago

GOGOGOSIR commented 3 years ago

问题概述

子应用之间第一次路由跳转，vue-router报错

demo地址

https://github.com/GOGOGOSIR/qiankunDemo

重现步骤

  1. 运行项目后，点击app-vue-history
  2. 然后点击hash about按钮跳转至app-vue-hash应用的about页
  3. 结果vue-router会报vue-router.js:2134 ChunkLoadError: Loading chunk 1 failed.

特别提示

  1. 如果先加载了（或者说已经访问过了）app-vue-hash应用的about页，执行以上步骤不会有任何报错
  2. 如果将qiankun的版本降至v2.1.0以下的版本，如：v2.0.26则不会出现以上问题

相关版本

gongshun commented 3 years ago

没有复现

1

不过子应用之间的跳转，最好不要用子应用的 router 对象， https://qiankun.umijs.org/zh/faq#%E5%BE%AE%E5%BA%94%E7%94%A8%E4%B9%8B%E9%97%B4%E5%A6%82%E4%BD%95%E8%B7%B3%E8%BD%AC%EF%BC%9F

121595113 commented 3 years ago
image

@gongshun 复现步骤：

感觉不是乾坤的问题，报错是在执行mount之前

GOGOGOSIR commented 3 years ago
image

@gongshun 复现步骤：

  • 在/app-vue-hash/home下刷新
  • 点击app-vue-history
  • 在 /app-vue-history/home下点击hash about，可复现

感觉不是乾坤的问题，报错是在执行mount之前

但是2.0.26版本就不会有问题，如果升级至这个版本以上的就会出现这个问题

gongshun commented 3 years ago
  • 在/app-vue-hash/home下刷新
  • 点击app-vue-history
  • 在 /app-vue-history/home下点击hash about，可复现

这步骤的确可以复现，但是报错主要原因是缓存 vue 实例导致的，如果按照常规写法，则不会有问题

GOGOGOSIR commented 3 years ago
  • 在/app-vue-hash/home下刷新
  • 点击app-vue-history
  • 在 /app-vue-history/home下点击hash about，可复现

这步骤的确可以复现，但是报错主要原因是缓存 vue 实例导致的，如果按照常规写法，则不会有问题

由于每个子应用项目都有各自的路由信息，如果通过主应用传入的vue-router实例去跳转，将不好获取对应子路由的路由信息，我觉得qiankun@2.0.26这个版本，支持子路由通过自己的vue-router实例去跳转，比较合理些

GOGOGOSIR commented 3 years ago
  • 在/app-vue-hash/home下刷新
  • 点击app-vue-history
  • 在 /app-vue-history/home下点击hash about，可复现

这步骤的确可以复现，但是报错主要原因是缓存 vue 实例导致的，如果按照常规写法，则不会有问题

由于每个子应用项目都有各自的路由信息，如果通过主应用传入的vue-router实例去跳转，将不好获取对应子路由的路由信息，我觉得qiankun@2.0.26这个版本，支持子路由通过自己的vue-router实例去跳转，比较合理些

你好，我根据你给出的提示，在app-vue-history 应用，通过主应用传进来的vuerouter实例去跳转，还是会出现“vue-router.js:2134 ChunkLoadError: Loading chunk 1 failed.”的问题，最新的demo：https://github.com/GOGOGOSIR/qiankunDemo

GOGOGOSIR commented 3 years ago
  • 在/app-vue-hash/home下刷新
  • 点击app-vue-history
  • 在 /app-vue-history/home下点击hash about，可复现

这步骤的确可以复现，但是报错主要原因是缓存 vue 实例导致的，如果按照常规写法，则不会有问题

对于主要原因是缓存 vue 实例导致的，我这里提供了一个 demo：https://github.com/GOGOGOSIR/qiankunKeepAliveDemo

问题描述：

  1. 运行应用后，在 http://localhost:8080/app-vue-hash/ 页面，点击 history about 按钮或主应用go history about（通过主应用传入的vuerouter去跳转），跳转至app-vue-history的about页，此时页面渲染是空的，如果我访问过此页面则正常。

补充说明： 这个例子的问题，和上个例子的问题，其实是一致的。都是：当没访问过某个应用的页面，直接通过另一个应用的某个页面直接跳转，都不能正确跳转过去。 而之前采用缓存vue实例的方式实现页面的缓存，应用之间的跳转则通过自身的vue-router实例去实现，在qiankun高于2.0.26都会出现问题，希望官方能够修复下，谢谢！

GOGOGOSIR commented 3 years ago

去掉缓存，vue 和 vue-router 在主应用通过cdn引入，子应用共享的demo 问题描述： 如果vue和vue-router是通过cdn的方式引入，当跨应用页面跳转的时候，如果没有访问过该页面，这时候无论是通过父应用的路由还是子应用的路由实例去跳转，vue-router都会报错，而通过npm的形式安装的则是正常的，这种情况有解决方法吗? qiankun版本是2.4.0 cdn 如果版本回退至2.0.15 68DF06DF-1641-4759-ADE7-F63C8AF64BBB

仓库地址： https://github.com/GOGOGOSIR/qiankunDemo 分支为 normal分支