vuejs2 - vuejsコード分割でnprogressを使用するには?

Question

私は vuejs が初めてで、vuejs コード分割機能で 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)

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'
      }
    }
  ]
})