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