Skip to content
On this page

安装

cnpm install --save nprogress
进度条颜色
css
#nprogress .bar {
    z-index: 9999;
    background: #48AD98;
}
router.js 文件内输入
js
import NProgress from 'nprogress'
import 'nprogress/nprogress.css' 

NProgress.configure({     
  easing: 'ease',  // 动画方式    
  speed: 500,  // 递增进度条的速度    
  showSpinner: false, // 是否显示加载ico    
  trickleSpeed: 200, // 自动递增间隔    
  minimum: 0.3 // 初始化时的最小百分比
})

router.beforeEach((to, from, next) => { //beforeEach是router的钩子函数,在进入路由前执行
  NProgress.start();
  if (to.meta.title) { //判断是否有标题
    document.title = to.meta.title
  }
  next() //执行进入路由,如果不写就不会进入目标页
})

router.afterEach(() => {
  // 在即将进入新的页面组件前,关闭掉进度条
  NProgress.done()
})
或 axios.js 文件内引入
js
// http response 拦截器
axios.interceptors.response.use(
  response => {
      if(typeof response.config.nprogress != undefined && !response.config.nprogress) { // 发送axios请求时 可以设置 nprogress=false 来设置是否需要进度条
        NProgress.done()
      }
      return response;
    }
  },
  error => {
    v.$message.error('未知错误')
    return Promise.reject(error);
  }
);