Как использовать vue лоадер в проекте?

Question

[HamSter]

Есть небольшой vue проект на codesandbox где пытаюсь использовать vue-spinner.

Основная страница Home.vue со ссылками на др. стр. \компоненты:

<router-link to="/">Home</router-link>
 <router-link to="/helloworld">Hello World</router-link>
 <router-link to="/bigimg">Big Img</router-link>

main.js:

import Vue from "vue";
import App from "./App";

import router from "./router";

Vue.config.productionTip = false;

/* eslint-disable no-new */
new Vue({
  el: "#app",
  router,
  components: { App },
  template: "<App/>"
});

router.beforeEach((to, from, next) => {
  //loading = true;
  next();
});

Хотелось бы выполнить загрузку сайта (осн. страницы) как на сайте fishtripr.com (vue).

Вопрос: Как применить данный лоадер для загрузки сайта (vue проекта) и отображать его же пару секунд при переходе между страницами (компонентами) проекта?

Answer 1

[0xD34F]

Как применить данный лоадер для загрузки сайта

Именно при загрузке - никак. Это же компонент, вы его сможете увидеть только после того, как App будет примонтирован. Можно создать иллюзию, что типа вот у нас тут страница грузится, ничего кроме лоадера нет, а по истечении какого-то промежутка времени показываем контент, типа всё загрузилось.

отображать его же пару секунд при переходе между страницами

Навигационные хуки beforeEach / afterEach - меняем в них значение loading.

Похоже на то, к чему вы стремились?

Comments

[HamSter]

Спасибо, действительно очень похоже!
Но у меня еще одна проблема которую никак не пойму как решают на сайте примере (https://www.fishtripr.com/). Лоадер затухает и уже просвечивается появляется страница. Немного поковырялась и нашла, что они тот же лоадер используют https://github.com/greyby/vue-spinner (только другой вид спинера). Но как происходит это затухание не пойму)

[0xD34F]

HamSter, не понял, что вы подразумеваете под "затуханием". Я наблюдаю такое поведение: лоадер помигал, пропал, контент появился.

[HamSter]

0xD34F, да извините это я уже напутала! На другом сайте тоже с vue лоадер затухает. А если хотя бы теоретически, такое возможно сделать или все же порядок "страница" --> loader --> "страница" и никак совместить на секунду пол секунды нельзя?

[0xD34F]

HamSter, если я вас правильно понял, то указывать loading не надо (true по умолчанию), вместо этого оберните элемент в transition, ну и v-if. Пример по ссылке в ответе обновил.

[HamSter]

0xD34F, да, оно! СПАСИБО!!!)