[vuejs/vue-router]在微前端qiankun为基座的情况下,手动修改浏览器地址栏,两个子应用间设置的createWebHashHistory base会互相叠加

2023-12-11 588 views
4

版本: ^4.1.3 重现步骤: 1、设置子应用A的createWebHashHistory base为/#/a,并设置路由表: { path: "/page-a", component: () =>import("../views/page-a/page-a.vue"); }, 2、设置子应用B的createWebHashHistory base为/#/b,并设置路由表: { path: "/page-b", component: () =>import("../views/page-b/page-b.vue"); }, 3、访问http://localhost:8080/#/page-a后,再通过手动修改浏览器地址到http://localhost:8080/#/page-b。 4、浏览器地址被强行修改成了http://localhost:8080/#/page-a/page-b。 PS: 1、如果通过页面去操作则不会有问题。 2、通过debugger vue-router.mjs,发现是修改通过手动修改浏览器地址以下代码中的state为null导致的,因为他调用了replace方法,而replace方法中会调用changeLocation方法,changeLocation方法强行添加了前缀page-a,导致去往b应用的路由错误。

const popStateHandler = ({ state, }) => {
        const to = createCurrentLocation(base, location);
        const from = currentLocation.value;
        const fromState = historyState.value;
        let delta = 0;
        if (state) {
            currentLocation.value = to;
            historyState.value = state;
            // ignore the popstate and reset the pauseState
            if (pauseState && pauseState === from) {
                pauseState = null;
                return;
            }
            delta = fromState ? state.position - fromState.position : 0;
        }
        else {
            replace(to);
        }
        // console.log({ deltaFromCurrent })
        // Here we could also revert the navigation by calling history.go(-delta)
        // this listener will have to be adapted to not trigger again and to wait for the url
        // to be updated before triggering the listeners. Some kind of validation function would also
        // need to be passed to the listeners so the navigation can be accepted
        // call all listeners
        listeners.forEach(listener => {
            listener(currentLocation.value, from, {
                delta,
                type: NavigationType.pop,
                direction: delta
                    ? delta > 0
                        ? NavigationDirection.forward
                        : NavigationDirection.back
                    : NavigationDirection.unknown,
            });
        });
    };

预期: 在不影响vue-router原逻辑的情况下,新增一个vue-router listeners的开关,并通过 createWebHashHistory 或 createWebHistory获取到他。从而开发人员可通过开关控制各个子应用间的路由监听器。

回答