У меня такое чувство, что ответ на этот вопрос довольно прост, но я нигде не могу найти ответ на него. Я создаю очень простое приложение с Vue. js (v2.6.11), которое состоит только из двух страниц, домашней страницы и еще одной страницы с формой. Теперь на обеих этих страницах есть несколько контейнеров параллакса, сделанных с Materialize CSS. Если вы незнакомы, контейнер параллакса - это просто div с изображением в качестве фона, и когда пользователь прокручивает, фоновое изображение перемещается с другой скоростью, чем передний план сайта.
Моя проблема заключается в том, что при переходе с домашней страницы на страницу с формой, используя ссылку Vue. js, <router-link :to="{name: "FormPage"}>Form Page</router-link>, изображения в контейнерах параллакса НЕ загружаются. Однако, если я обновлю sh страницу, изображения загрузятся нормально, и все будет хорошо. Точно так же, если я заменю <router-link> на простой <a href="/FormPage">Form Page</a>, изображения загружаются нормально, все работает как надо.
Итак, мой вопрос таков: почему мои изображения контейнера параллакса не загружаются на страницу, к которой осуществляется переход с помощью <router-link></router-link>, но затем, когда я перехожу на ту же страницу с <a href=""></a>, изображения загружаются? Другими словами, что делает <router-link></router-link>, что препятствует загрузке изображений из моего параллакс-контейнера ??
Любая обратная связь приветствуется. В противном случае, я надеюсь, что у вас чудесный день, и спасибо за то, что уделили мне время на чтение и ответ на мой вопрос:)
- Обновление-- КОД: это компонент на главной странице, содержащий ссылку на question:
<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>
--- ОБНОВЛЕНИЕ: Полное приложение для репозитория и песочницы --- Кто-то упомянул, что это будет eaiser, если Я предоставил изолированное приложение или что-то еще для его отладки, поэтому я просто создал github repo publi c и также загрузил его в codesandbox.io . Вы заметите, что в codesandbox.io изображения параллакса даже не загружаются вообще ... на домашней странице, на странице формы или после ссылки sh!