Question

我有一个自定义地图组件，它包装了Openlayers 4实例。我被迫使用的此组件已在我的SPA中多次使用。初始化过程很长，因此我想保持一个地图实例可用，并在需要时在视图之间移动它。问题在于，移动后状态不会在组件内更新。

我将问题归结为这个小提琴：https://jsfiddle.net/j16d4yto/ 当在同一路由器视图上移动时，状态更新会很好（点击“更改文字”按钮）。但是，当路由器视图发生更改，并且该组件与appendChild一起移动到新的div时，状态冻结，并且您无法再更新text变量。

这是我将组件从一个元素移动到另一个元素的方法：

this.$root.$on('showMoveableComponent', function(element) {
      element.appendChild(thisElement);
      this.text = 'Changed text2';
    });

我敢打赌我在这里做错了什么，并且可能也以错误的方式解决了这个问题？

谢谢！

Answer 1

由于+proj=utm +zone=32 +ellps=WGS84 +datum=WGS84 +units=m +no_defs的更改，您的@Component public class AuthenticationFilter extends OncePerRequestFilter {仅被您仍然引用的DOM元素破坏了，因此它不起作用。您可以通过在router-view生命周期回调函数中打印一些内容进行测试。

因此，这意味着您可以使用内置的MoveableComponent组件来解决此问题：

destroyed

Example

keep-alive组件将缓存在某些其他情况下可能不好的所有内容。

我认为解决此问题的更好方法是创建另一个Vue实例并将其移动。

<keep-alive>
  <router-view></router-view>
</keep-alive>

Example

在路由器视图之间移动时，Vue组件状态冻结

1 个答案: