如何在vuejs代码拆分中使用nprogress？

Question

我是vuejs的新手，我想将nprogress与vuejs的代码分割功能一起使用。基本上，当使用导航到页面时，我想要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'
      }
    }
  ]
})

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;

这样，您就可以在每次路由更改时使用加载器。