《vue使用nprogress》页面跳转时出现在浏览器顶部的进度条

 一. 在vue工程中下载nprogress依赖包

       npm install nprogress --save

二. 在src文件夹中创建permission.js文件

      import router from './router'
      import NProgress from 'nprogress' // Progress 进度条
      import 'nprogress/nprogress.css'// Progress 进度条样式
      router.beforeEach((to, from, next) => {
      NProgress.start()
      next()
      })

router.afterEach(() => {
NProgress.done()
})

三. 在main.js中全局注册进度条

      import '@/permission'

 

在项目中，进度条的颜色肯定期望可以自定义，进度条的自定义也非常简单：

只需要在App.vue中自定义写style样式即可：

<style>
#nprogress .bar {
background: #42b983 !important;
}
</style>