Как отрисовать прогресс перед вызовом router во Vue

Для отображения прогресса перед переходом между маршрутами в Vue Router можно использовать глобальные хуки навигации и библиотеку nprogress:

1. Установите nprogress:

npm install nprogress

2. В файле роутера (обычно router/index.js):

import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

router.beforeEach((to, from, next) => {
  NProgress.start()
  next()
})

router.afterEach(() => {
  NProgress.done()
})

Ключевые моменты:

• beforeEach запускает индикатор перед началом навигации
• afterEach завершает его после завершения перехода
• Можно добавить обработку ошибок в onError
• Для кастомизации используйте CSS-переменные NProgress