vue項目中實現頁面跳轉加載進度條（NProgress插件的使用）

效果圖

1、npm install nprogress --save
2、在router文件的index.js中導入如下代碼

import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

3、設置全局路由前置守衛和全局路由後置鉤子，來實現進度條的顯示與完成。

router.beforeEach((to, from, next) => {
  NProgress.start() // 顯示進度條
  next()
})

router.afterEach(() => {
  NProgress.done() // 完成進度條
})

另附上全部代碼

// 這兩句代碼必須放到加載Vue實例的上面。
import NProgress from 'nprogress' 
import 'nprogress/nprogress.css'

import Vue from 'vue'
import Router from 'vue-router'
import routes from './router'

Vue.use(Router)

const router = new Router({
  // mode: 'history',
  // base: process.env.BASE_URL,
  routes
})

router.beforeEach((to, from, next) => {
  NProgress.start() // 顯示進度條
  next()
})

router.afterEach(() => {
  NProgress.done() // 完成進度條
})

export default router