javascript - 为什么通过 anchor 链接导航时会加载背景图像，而不是通过 routerLink 导航时加载背景图像？

Question

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

我的问题是，当我使用 Vue.js 链接从主页导航到带有表单的页面时，<router-link :to="{name: "FormPage"}>Form Page</router-link> ，视差容器中的图像不会加载。但是，如果我刷新页面，图像加载正常并且一切正常。同样，如果我替换 <router-link>用一个简单的<a href="/FormPage">Form Page</a>图像加载良好，一切正常。

所以我的问题是:为什么我的视差容器图像不加载到使用 <router-link></router-link> 导航到的页面上，但是当我使用 <a href=""></a> 导航到同一页面时图像加载了吗？换句话说，什么是<router-link></router-link>这样做会阻止我的视差容器图像加载？

如有任何反馈，我们将不胜感激。否则，我希望您度过愉快的一天，并感谢您花时间阅读和/或回答我的问题:)

--更新--代码:这是主页上包含相关链接的组件:

<template>
  <div id="index-banner" class="parallax-container" style="height: 400px;">
    <div class="section no-pad-bot">
      <div class="container">
        <br><br>
        <h1 class="header center white-text">{{ translations.title }}</h1>
        <div class="row center">
          <h5 class="header col s12 white-text light">{{ translations.subtitle }}</h5>
        </div>
        <div class="row center">
          <!-- <router-link :to="{name: 'Generator', force: true }" class="btn-large waves-effect waves-light teal lighten-1 center-align">{{ buttonText }}</router-link> -->
          <a href="/email-signature-generator" class="btn-large waves-effect waves-light teal lighten-1 center-align">{{ translations.buttonText }}</a>
        </div>
      </div>
    </div>
    <div class="parallax"><img :src="img" alt="Unsplashed background img 1"></div>
  </div>
</template>

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

<style>
</style>

这是导航到的“ View ”，包含有问题的视差容器:

<template>
  <div>
    <PageTitle
      :translations="$t('generatorPage.components.pageTitle')"
      img="/imgs/parallax5.jpeg"
    />
    <SigForm 
      :translations="$t('generatorPage.components.sigForm')"
    />
    <Separator
      img="/imgs/parallax5.jpeg"
    />
  </div>
</template>

<script>
import PageTitle from '@/components/banner/parallax/PageTitle'
import Separator from '@/components/banner/parallax/Separator'
import SigForm from '@/components/generator/SigForm'

export default {
  name: 'Generator',
  components: {
    PageTitle,
    SigForm,
    Separator,
  }
}
</script>

<style>
</style>

这是带有视差容器的“PageTitle”组件:

<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>

---更新:完整的存储库和沙盒应用程序---有人提到如果我提供一个沙盒应用程序或其他任何东西来调试它会更容易，所以我只是做了 github repo公开并上传至codesandbox.io 。您会注意到，在codesandbox.io上，视差图像甚至根本没有加载......在主页、表单页面或刷新时!

Answer 1

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

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

所以这是我的预感:

Parallax是一个需要像这样初始化的组件:

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

  // Or with jQuery

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

如果您忽略该初始化代码，它将无法工作。并且，取自选择字段的文档 dynamically added components need reinitialising .

You must initialize the select element as shown below. In addition, you will need a separate call for any dynamically generated select elements your page generates.

所以我的预感是，当通过导航器重新渲染页面时，我们会在 dom 中添加一个新组件 - 但这是在初始化已经运行之后。因此该组件未初始化。

可能是错的，希望我不是为了你而不是为了我。正如我所说，我根本不太了解 Vue 或 React，而且我在每次渲染时运行 init 的建议对 React 问题不起作用 - 但有太多移动部分，很难排除。