javascript - 为什么通过锚链接而不是 routerLink 导航时加载背景图像?
问题描述
我觉得这个问题的答案很简单,但我在任何地方都找不到答案。我正在使用 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>
什么阻止了我的视差容器图像加载?
任何和所有反馈将不胜感激。否则,我希望你有一个美好的一天,并感谢你花时间阅读和/或回答我的问题:)
--Update-- 代码:这是主页上包含相关链接的组件:
<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>
---更新:完整的 repo 和沙盒应用程序--- 有人提到如果我提供一个沙盒应用程序或任何调试它会更容易,所以我只是将github repo公开并将其上传到codesandbox.io。您会注意到在codesandbox.io 上,甚至根本没有加载视差图像……在主页、表单页面或刷新时!
解决方案
好的,所以这不是答案,但我需要发布一些代码来说明。
我不得不承认我对 JS 框架并不完全熟悉,但我确实非常了解 materializecss。我一直在尝试帮助另一个用户解决基于 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();
});
如果您不考虑该初始化代码,它将无法正常工作。并且,取自选择字段的文档,动态添加的组件需要重新初始化。
您必须初始化选择元素,如下所示。此外,您需要单独调用页面生成的任何动态生成的选择元素。
所以我的预感是,当页面通过导航器重新呈现时,我们会在 dom 中添加一个新组件 - 但这是在初始化已经运行之后。因此该组件未初始化。
可能是错的,希望我不是为了你而不是为了我。正如我所说,我对 Vue 或 React 不是很了解,而且我在每次渲染时运行 init 的建议对于 React 问题不起作用——但是有很多活动部件很难排除。
推荐阅读
- visual-studio-code - 使用 CodeRunner 扩展的 VS Code 的 C++ 问题
- c# - 无法为 ASP.NET Gridview 激活 RowDataBound 事件
- react-native - 我在 expo 框架中使用钩子反应原生,即使我添加了一个空数组,整个代码也会重复 3 次
- html - css position:sticky - top:0 垂直滚动很好,但 left:0 水平滚动不粘
- hibernate - 从 OneToMany 关系中提取记录的休眠标准
- python - 如何从excel文件中取消透视多索引数据
- python - 如何在相似的行名上使用 Pandas 识别模式
- .net - Authorize.Net AIM/SIM API 和 Simple Checkout 正式弃用
- excel - 慢速搜索/过滤算法
- c - 我想从包含整数和浮点数的文件中读取数据