如何在Vue.js代码分割中使用NProgress实现页面导航进度条？

Hey there! Since you're new to Vue.js, let's break down how to set up NProgress with code-split components in your Vue Router—this will make your page navigations feel smoother with that nice progress bar. I’ll build right on the code you shared to make this work perfectly.

Step 1: Fix Up Your Async Component Function #

First, your asyncComponent function needs to properly wrap the dynamic import and handle both success and error cases. This ensures Vue waits for the component to load before finishing the navigation (which is exactly when we want NProgress to stop). Here's the completed version:

function asyncComponent(importComponent) {
  return () => importComponent()
    .then(module => {
      // Return the component once it's loaded
      return { component: module.default }
    })
    .catch(error => {
      // Handle component loading errors (optional but useful)
      console.error('Oops, failed to load component:', error)
      // You can return an error page component here if you have one
      return { component: () => import('../views/ErrorPage.vue') }
    })
}

Step 2: Add Vue Router Navigation Guards #

We’ll use Vue Router’s global guards to start and stop NProgress at the right times:

• Start the progress bar when a navigation begins
• Stop it when the navigation completes (even if there’s an error, so the bar doesn’t get stuck)

Here’s how to integrate this with your existing router setup:

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

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

Vue.use(Router)

// Our fixed async component function
function asyncComponent(importComponent) {
  return () => importComponent()
    .then(module => ({ component: module.default }))
    .catch(err => {
      console.error('Component load failed:', err)
      return { component: () => import('../views/ErrorPage.vue') }
    })
}

// Create your router instance
const router = new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      component: Full,
      children: [
        // Example code-split routes
        {
          path: 'dashboard',
          name: 'Dashboard',
          component: asyncComponent(() => import('../views/Dashboard.vue'))
        },
        {
          path: 'profile',
          name: 'Profile',
          component: asyncComponent(() => import('../views/Profile.vue'))
        }
        // Add more routes here as needed
      ]
    }
  ]
})

// Start NProgress when navigation starts
router.beforeEach((to, from, next) => {
  NProgress.start()
  next()
})

// Stop NProgress when navigation finishes successfully
router.afterEach(() => {
  NProgress.done()
})

// Also stop NProgress if there's a navigation error (like failed component load)
router.onError((error) => {
  console.error('Navigation error:', error)
  NProgress.done()
})

export default router

Step 3: Optional Customizations (Make It Yours!) #

You can tweak NProgress to match your app’s style. Add these config lines right after importing NProgress:

NProgress.configure({
  showSpinner: false, // Hide the loading spinner if you don't want it
  easing: 'ease-in-out', // Change the animation style
  speed: 400, // Adjust how fast the bar fills
  minimum: 0.2 // Set a minimum progress percentage so it doesn't start at 0
})

You can also customize the progress bar’s color by editing the nprogress.css file (look for the #nprogress .bar selector and change the background property).

内容的提问来源于stack exchange，提问作者Shubham