如何在 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;

有了这个，您将在每次更改路线时都有装载机。