关于主应用跳转bug

mongofeng commented 2 years ago

a标签和history.pushState跳转微应用问题? 比如说点击微应用1加载完毕后，再点击微应用2之后，url的路径是直接拼接到后面的，导致跳转不了其他应用。备注：删掉注册微应用的代码就可以了，如果主应用使用vue框架的router-link没问题的。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>Webpack App</title>
</head>

<body>
    <a href="#/vite">vite</a>
    <a href="#/vue">vue</a>
    <div id="vue-app"></div>
</body>
<script src="./public/index.umd.min.js"></script>
<script>
    console.error('init')
    function jump(url) {

        location.hash = url
    }

    const { registerMicroApps, start } = qiankun

    registerMicroApps([
        {
            name: 'app1', // app name registered
            entry: '//localhost:3000',
            container: '#vue-app',
            activeRule: location => location.hash.startsWith('#/vite'),
        },
        {
            name: 'app2', // app name registered
            entry: '//localhost:9999',
            container: '#vue-app',
            activeRule: location => location.hash.startsWith('#/vue'),
        },
    ]);

    // setDefaultMountApp('/vite');
    start();
</script>

</html>

Context

qiankun Version:2.6.3
Platform Version:
Browser Version:Chrome 版本 97.0.4692.99

github-actions[bot] commented 2 years ago

Hello @mongofeng. In order to facilitate location and troubleshooting, we need you to provide a realistic example. Please forking these link codesandbox or clone qiankun examples to your GitHub repository.

你好 @mongofeng, 为了方便定位和排查问题，我们需要你提供一个重现实例，请提供一个尽可能精简的链接 codesandbox 或直接 clone qiankun examples，并上传到你的 GitHub 仓库。

mongofeng commented 2 years ago

例子https://github.com/mongofeng/qiankun

Hello @mongofeng. In order to facilitate location and troubleshooting, we need you to provide a realistic example. Please forking these link codesandbox or clone qiankun examples to your GitHub repository.

你好 @mongofeng, 为了方便定位和排查问题，我们需要你提供一个重现实例，请提供一个尽可能精简的链接 codesandbox 或直接 clone qiankun examples，并上传到你的 GitHub 仓库。

🌰https://github.com/mongofeng/qiankun

wang3690004 commented 2 years ago

a标签和history.pushState跳转微应用问题? 比如说点击微应用1加载完毕后，再点击微应用2之后，url的路径是直接拼接到后面的，导致跳转不了其他应用。备注：删掉注册微应用的代码就可以了，如果主应用使用vue框架的router-link没问题的。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>Webpack App</title>
</head>

<body>
    <a href="#/vite">vite</a>
    <a href="#/vue">vue</a>
    <div id="vue-app"></div>
</body>
<script src="./public/index.umd.min.js"></script>
<script>
    console.error('init')
    function jump(url) {

        location.hash = url
    }

    const { registerMicroApps, start } = qiankun

    registerMicroApps([
        {
            name: 'app1', // app name registered
            entry: '//localhost:3000',
            container: '#vue-app',
            activeRule: location => location.hash.startsWith('#/vite'),
        },
        {
            name: 'app2', // app name registered
            entry: '//localhost:9999',
            container: '#vue-app',
            activeRule: location => location.hash.startsWith('#/vue'),
        },
    ]);

    // setDefaultMountApp('/vite');
    start();
</script>

</html>

Context

qiankun Version:2.6.3
Platform Version:
Browser Version:Chrome 版本 97.0.4692.99

我用的vue技术栈主应用vue2 vue-router3 子应用1 vue2 vue-router3 子应用2 vue3 vue-router4 从子应用1切换到子应用2 没有问题，然后再从子应用2切回子应用1 的时候会出现切换的路由是基于子应用1的路由进行的切换从而导致切换失败

jk4235 commented 2 years ago

我之前使用react技术栈,我的经验是跨应用跳转,可以试试single-spa 提供的方法,一般都能解决问题

import { navigateToUrl } from 'single-spa'

navigateToUrl("/app1")

navigateToUrl介绍

mongofeng commented 2 years ago

这是来自QQ邮箱的假期自动回复邮件，信件已收到，我会尽快处理，祝你生活愉快。

micro6 commented 1 month ago

@mongofeng 请问该问题解决了么

umijs / qiankun

关于主应用跳转bug #1951

Context

Context