Vue Leaflet 中的 Map 未卸载

Question

我正在使用 Vue3 leaflet。 我有一个在中创建的mounted 。 但是，当我使用router.push({ name: "home" })从 map 导航到应用程序中的不同页面时，然后我使用返回按钮到 go 回到 Z1D78DC8ED51214E5018B511FE，然后得到奇怪的效果我在标题中提到。

我会总结一下奇怪的效果，因为在离开页面然后返回页面而不点击刷新时，map 上似乎还有额外的层。

这是一个演示这一点的视频： https://i.imgur.com/Mzarim8.gifv

因此，在视频的开头，您可以看到 map 工作正常，然后我离开 map，然后单击移动浏览器上的后退按钮返回 map，您可以看到问题

问题概述：

1. 当第一次导航到 map URL 时，一切正常（map 在mounted中创建）
2. 然后，用户通过单击按钮离开 map
3. 按钮调用router.push({ name: SOME_PLACE })
4. 用户点击浏览器上的返回按钮回到map，然后得到奇怪的效果
5. 当用户刷新页面时，故障消失，map 正常工作

所以这通常只发生在移动设备上。 我可以在移动设备上每次都重现它，但对于桌面设备，我很难重现它。

我在onBeforeUnmount中放置了一个console.log ，但在离开页面时我从来没有看到它被触发。 不确定它是否应该，但在onBeforeUnmount我有这段代码试图修复重叠层（至少我认为是这样）：

    onBeforeUnmount() {
        if (this.map) {
            this.map.remove();
        }
    }

所以我的猜测是，原来的 map 仍然在下面，或者当用户返回页面时，至少某些层还在，所以当我将屏幕拖到可见然后通过刷新时，map 会被清除并创建一个新的。

不知道这是否准确，但有人知道如何解决吗？

这就是 map 实际在mounted中创建的方式：

this.map = L.map("mapContainer").setView([lat, lng], 10).on('click', this.onMapClick);
this.markerLayerGroup = L.layerGroup().addTo(this.map);
this.singleMarkerLayerGroup = L.layerGroup().addTo(this.map);
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
                attribution: '&copy; <a href="https://osm.org/copyright">OpenStreetMap</a> contributors',
}).addTo(this.map);

Answer 1

我缺乏信息并了解您是如何制作组件的，但我可以建议您尝试另一种类型的 Vue3 生命周期。

有时组件未卸载并且 go 到已停用的 state 因此您可以尝试以下生命周期：

注册一个回调，在组件实例作为缓存的树的一部分插入 DOM 后调用。

onActivated() 

注册一个回调，以便在组件实例从 DOM 中删除后调用，作为缓存的树的一部分。

onDeactivated()

我在这里留下了具有不同生命周期的Vue3 文档。