Индикатор загрузки

Nuxt.js использует свой компонент для отображения прогресса загрузки для переходов между маршрутами. Вы можете изменить его, отключить или создать собственный.

Отключение индикатора загрузки

Если вы не хотите отображать индикатор загрузки в переходах между маршрутами, просто установите loading: false в файле nuxt.config.js:

module.exports = {
  loading: false
}

Изменение индикатора загрузки

Список параметров для изменения индикатора загрузки.

Ключ Тип По-умолчанию Описание
color String 'black' CSS-цвет индикатора загрузки
failedColor String 'red' CSS-цвет индикатора загрузки в случае возникновения ошибки при рендеринге маршрута (например, если методы data или fetch вернули ошибку).
height String '2px' Высота индикатора загрузки (используется в свойстве style индикатора)
duration Number 5000 В мс, максимальная продолжительность работы индикатора. Nuxt.js предполагает, что маршрут будет отрендерен в течение 5 сек.

Для создания синего индикатора загрузки высотой 5 пикселей, измените nuxt.config.js следующим образом:

module.exports = {
  loading: {
    color: 'blue',
    height: '5px'
  }
}

Создание собственного индикатора

Вы можете создать собственный компонент, который Nuxt.js будет отображать вместо своего. Для этого просто укажите путь к компоненту в параметре loading.

Ваш собственный компонент должен содержать некоторые из следующих методов:

Метод Обязательный Описание
start() Да Вызывается при изменении текущего маршрута, чтобы отобразить индикатор.
finish() Да Вызывается, когда маршрут и его данные загружены, чтобы скрыть индикатор.
fail() Нет Вызывается, когда маршрут не может быть загружен (например, ошибка загрузки данных).
increase(num) Нет Вызывается во время загрузки компонента маршрута, num — число < 100.

Мы можем создать собственный индикатор в components/loading.vue:

<template lang="html">
  <div class="page-loader" v-if="loading">
    <p>Загрузка...</p>
  </div>
</template>

<script>
export default {
  data: () => ({
    loading: false
  }),
  methods: {
    start () {
      this.loading = true
    },
    finish () {
      this.loading = false
    }
  }
}
</script>

<style scoped>
.page-loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding-top: 200px;
  font-size: 30px;
  font-family: sans-serif;
}
</style>

Затем указываем в nuxt.config.js параметр loading:

module.exports = {
  loading: 'components/loading.vue'
}

Обнаружили ошибку или хотите внести свой вклад в документацию? Отредактировать эту страницу на GitHub!