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获取到他。从而开发人员可通过开关控制各个子应用间的路由监听器。