Потеря материализации JavaScript и функциональности jquery после routerLink или кнопки возврата браузера

Question

На моей домашней странице у меня есть слайдер, который сначала отлично работает, но если я перехожу на другую страницу, а затем возвращаюсь на свою домашнюю страницу, слайдер теряет все функции и становится серым. Это также относится к материалам в коробках с изображениями, где я реализую функцию увеличения на своих изображениях, эта функция также теряется, когда я начинаю навигацию по своему веб-сайту. для слайдера я использую jquery для функциональности и для функции масштабирования я использую javascript.

Они прекрасно работают, если я обновлю страницу. Я также npm устанавливаю jquery для jquery-зависимостей вместо cdn, но он все равно не работает.

  <template>
    <div class="HomePage">
        <div class="slider">
            <ul class="slides">
                <li>
                    <img src="../assets/images/Main Image.jpg">
                    <div class="caption left-align">
                        <h3 class="white-text">Welcome to HoodFave</h3>
                        <h5 class="light grey-text text-lighten-3">Shooter's win</h5>
                    </div>
                </li>
                <li>
                    <img src="../assets/images/TWIU.jpg">
                    <div class="caption  center-align">
                        <h3 class="white-text">New Collection:</h3>
                        <h5 class="light black-text text-lighten-3">"The World is Yours"</h5>
                    </div>
                </li>
            </ul>
        </div>        
    </div>
</template>

 $(document).ready(function(){
    $('.slider').slider({
          full_width: false,
          interval: 7000,
          transition: 100,
          height: 750
    });
  });

Это прекрасно работает, когда я загружаю первую страницу, но когда я перехожу на веб-сайт и возвращаюсь, слайдер автоматически теряет функциональность.