Как использовать nprogress с разделением кода vuejs?

Question

Привет, я новичок в vuejs и хочу использовать nprogress с функциями разделения кода vuejs. В принципе я хочу прогресс при использовании навигации по страницам. Требуется показать прогресс до тех пор, пока обещание компонента не разрешится Пожалуйста, помогите мне добавить эту функцию в мое приложение, надеюсь, что это будет иметь смысл в этом вопросе. Вот мой код:-

import Vue from 'vue'
import Router from 'vue-router'
import Nprogress from 'nprogress'
import 'nprogress/nprogress.css';

// layout components
import Full from '../container/Full'

function asyncComponent(importComponent) {
  return importComponent()
  Nprogress.start();
  importComponent().then(() => {
    Nprogress.done();
    return importComponent();
  })
}

// dashboard components

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      component: Full,
      redirect: '/dashboard/dashboard-v1',
      children: [
        {
          path: '/dashboard/dashboard-v1',
          component: asyncComponent(() => import('../views/dashboard/DashboardOne')),
          meta: {
            title: 'Dashboard V1',
            breadcrumb: 'Dashboard / Dashboard V1'
          }
        },
        {
          path: '/dashboard/dashboard-v2',
          component: asyncComponent(() => import('../views/dashboard/DashboardTwo')),
          meta: {
            title: 'Dashboard V2',
            breadcrumb: 'Dashboard / Dashboard V2'
          }
        }
      ]
    },
    {
      path: '/session/sign-up',
      component: asyncComponent(() => import('../views/SignUp')),
      meta: {
        title: 'Sign Up',
        breadcrumb: 'Session / Sign Up'
      }
    },
    {
      path: '/session/login',
      component: asyncComponent(() => import('../views/Login')),
      meta: {
        title: 'Login',
        breadcrumb: 'Session / Login'
      }
    },
    {
      path: '/session/lock-screen',
      component: asyncComponent(() => import('../views/LockScreen')),
      meta: {
        title: 'Lock Screen',
        breadcrumb: 'Session / Lock Screen'
      }
    }
  ]
})

Answer 1

Функциональность NProgress в основном работает с маршрутизацией страниц, как каждый маршрут меняется, запускается загрузчик NProgress, и это было написано, как показано ниже,

import Vue from 'vue'
import Router from 'vue-router'
import Nprogress from 'nprogress'
import 'nprogress/nprogress.css';

// layout components
import Full from '../container/Full'

function asyncComponent(importComponent) {
    return importComponent()
    Nprogress.start();
    importComponent().then(() => {
        Nprogress.done();
        return importComponent();
    })
}

// dashboard components

Vue.use(Router)

const router = new Router({
  routes: [
    {
      path: '/',
      component: Full,
      redirect: '/dashboard/dashboard-v1',
      children: [
        {
          path: '/dashboard/dashboard-v1',
          component: asyncComponent(() => import('../views/dashboard/DashboardOne')),
          meta: {
            title: 'Dashboard V1',
            breadcrumb: 'Dashboard / Dashboard V1'
          }
        },
        {
          path: '/dashboard/dashboard-v2',
          component: asyncComponent(() => import('../views/dashboard/DashboardTwo')),
          meta: {
            title: 'Dashboard V2',
            breadcrumb: 'Dashboard / Dashboard V2'
          }
        }
      ]
    },
    {
      path: '/session/sign-up',
      component: asyncComponent(() => import('../views/SignUp')),
      meta: {
        title: 'Sign Up',
        breadcrumb: 'Session / Sign Up'
      }
    },
    {
      path: '/session/login',
      component: asyncComponent(() => import('../views/Login')),
      meta: {
        title: 'Login',
        breadcrumb: 'Session / Login'
      }
    },
    {
      path: '/session/lock-screen',
      component: asyncComponent(() => import('../views/LockScreen')),
      meta: {
        title: 'Lock Screen',
        breadcrumb: 'Session / Lock Screen'
      }
    }
  ]
})

router.beforeResolve((to, from, next) => {
    // If this isn't an initial page load.
    if (to.name) {
        // Start the route progress bar.
        NProgress.start()
    }
    next()
})

router.afterEach((to, from) => {
    // Complete the animation of the route progress bar.
    NProgress.done()
})

export default router;

при этом у вас будет загрузчик при каждом изменении маршрута.

Спасибо,