Javascript 为什么通过锚链接而不是routerLink导航时加载背景图像？

我觉得这个问题的答案很简单，但我在任何地方都找不到答案。我正在用Vue.js（v2.6.11）构建一个非常简单的应用程序，它只包含两个页面，一个主页和另一个带有表单的页面。现在，在这两个页面上，都有几个由。如果您不熟悉，视差容器基本上只是一个以图像为背景的div，当用户滚动时，背景图像的移动速度与站点前景的移动速度不同

我的问题是，当我使用Vue.js链接从主页导航到带有表单的页面时，

好，所以这不是答案，但我需要发布一些代码来说明

我必须承认，我对JS框架并不完全熟悉，但我对ECS非常了解。我一直试图帮助另一个用户解决一个基于React的问题，即当使用React路由器时sidenav停止工作，直到他刷新页面，页面再次正常工作

这是我的直觉：

是需要初始化的组件，如下所示：

document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.parallax');
    var instances = M.Parallax.init(elems);
  });

  // Or with jQuery

  $(document).ready(function(){
    $('.parallax').parallax();
  });

如果你不使用初始化代码，它就不会工作。和，取自所选字段的文档

必须初始化select元素，如下所示。此外
对于任何动态生成的select，都需要单独调用
页面生成的元素

因此，我的直觉是，当页面通过导航器重新呈现时，我们会在dom中添加一个新组件——但这是在初始化已经运行之后。因此，该组件未初始化

可能是错的，希望我不是为了你而不是为了我。正如我所说，我对Vue或React一点也不了解，我建议在每次渲染时运行init对React问题不起作用-但是有太多的活动部分，很难排除。
好的，所以这不是答案，但我需要发布一些代码来说明

我必须承认，我对JS框架并不完全熟悉，但我对ECS非常了解。我一直试图帮助另一个用户解决一个基于React的问题，即当使用React路由器时sidenav停止工作，直到他刷新页面，页面再次正常工作

这是我的直觉：

是需要初始化的组件，如下所示：

document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.parallax');
    var instances = M.Parallax.init(elems);
  });

  // Or with jQuery

  $(document).ready(function(){
    $('.parallax').parallax();
  });

如果你不使用初始化代码，它就不会工作。和，取自所选字段的文档

必须初始化select元素，如下所示。此外
对于任何动态生成的select，都需要单独调用
页面生成的元素

因此，我的直觉是，当页面通过导航器重新呈现时，我们会在dom中添加一个新组件——但这是在初始化已经运行之后。因此，该组件未初始化

可能是错的，希望我不是为了你而不是为了我。正如我所说，我对Vue或React一点也不了解，我建议在每次渲染时运行init对React问题不起作用-但是有太多的运动部件，很难排除。
@depperm。如果您需要更多的代码示例，请询问。我不想用太多的代码来解决这个问题，但我试着在不造成混乱的情况下尽可能多地包含这些内容。一个可以调试应用程序的可行演示会使问题更容易解决。这个问题没有显示路由器是如何配置的，但我假设
会重新加载页面，因此会有所不同。由于Materialize并不是专门为SPA和Vue构建的，因此可以安全地假设它初始化了视差一次，并且不知道会有进一步的更改。您可能会注意到，它解释了在老式JS中是如何实现的。每次需要初始化视差时，您可能需要调用
parallax（）
。未经请求的保护：不要在布局中使用换行符。在元素（
h1{}
）或应用边距或填充（
.margin top{}
）的类上使用全局样式。浏览器控制台说什么？404用于那些图像URL？那么，这可能是因为用于完成相对图像URL到绝对图像URL的不同基本URL的问题。@CBroe浏览器控制台对图像没有任何警告或错误。浏览器控制台只会显示一条警告：“DevTools无法解析SourceMap”@depperm。如果您需要更多的代码示例，请询问。我不想用太多的代码来解决这个问题，但我试着在不造成混乱的情况下尽可能多地包含这些内容。一个可以调试应用程序的可行演示会使问题更容易解决。这个问题没有显示路由器是如何配置的，但我假设
会重新加载页面，因此会有所不同。由于Materialize并不是专门为SPA和Vue构建的，因此可以安全地假设它初始化了视差一次，并且不知道会有进一步的更改。您可能会注意到，它解释了在老式JS中是如何实现的。每次需要初始化视差时，您可能需要调用
parallax（）
。未经请求的保护：不要在布局中使用换行符。在元素（
h1{}
）或应用边距或填充（
.margin top{}
）的类上使用全局样式。浏览器控制台说什么？404用于那些图像URL？那么，这可能是因为用于完成相对图像URL到绝对图像URL的不同基本URL的问题。@CBroe浏览器控制台对图像没有任何警告或错误。浏览器控制台只会显示一条警告“DevTools无法解析SourceMap”
<template>
  <div class="parallax-container form-parallax-container">
    <h1 class="white-text center">{{ translations.title }}</h1>
    <div class="parallax"><img :src="img"></div>
  </div>
</template>

<script>
export default {
  name: 'PageTitle',
  props: {
    translations: String,
    img: String
  }
}
</script>

<style>
</style>

<template>
  <div class="parallax-container form-parallax-container">
    <div class="parallax"><img :src="img"></div>
  </div>
</template>

<script>
export default {
  name: 'Separator',
  props: {
    img: String
  }
}
</script>

<style>
</style>

document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.parallax');
    var instances = M.Parallax.init(elems);
  });

  // Or with jQuery

  $(document).ready(function(){
    $('.parallax').parallax();
  });