我觉得这个问题的答案很简单，但我在任何地方都找不到答案。我正在用Vue.js(v2.6.11(构建一个非常简单的应用程序，它只包含两个页面，一个主页和另一个带表单的页面。现在，在这两个页面上，都有几个用MaterializeCSS制作的视差容器。如果你不熟悉，视差容器基本上只是一个以图像为背景的div，当用户滚动时，背景图像的移动速度与网站的前景不同。
我的问题是，当我使用Vue.js链接<router-link :to="{name: "FormPage"}>Form Page</router-link>从主页导航到带有表单的页面时，视差容器中的图像不会加载。然而，如果我刷新页面，图像加载良好，一切都很好。类似地，如果我用简单的<a href="/FormPage">Form Page</a>替换<router-link>，则图像加载良好，一切正常。
所以我的问题是：为什么我的视差容器图像不加载到用<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>
这是导航到的"视图"，包含有问题的视差容器：
<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上，视差图像甚至根本没有加载。。。在主页上，在表单页面上，或在刷新时！
好的，所以这不是的答案，但我需要发布一些代码来说明。
我不得不承认，我并不完全熟悉JS框架，但我确实非常了解物化。我一直在尝试帮助另一位用户解决基于React的问题，即当使用React路由器时，侧导航停止工作，直到他刷新页面，页面再次正常工作。
所以我的直觉是：
视差是一个需要初始化的组件，如下所示：
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问题，但有太多的活动部分，很难排除。