vue 如何使用 nprogress

Question

现在有这个需求,希望每次页面载入的时候，浏览器顶部有载入动画可以叫作 top progress bar 。我现在的做法是 用 vue-progressbar 这个插件 github链接但是我需要每个页面的ready() 和 created（） 里面都要写代码，特别繁琐。之前在 vue 论坛 看见一个人说的是 在 vue-route 里面 beforeEach 和 afterEach 使用 nprogress 。。但是我问他 就没有下文了。。nprogress bar 的官方地址 github 连接大家有谁用过这个？？？？？ 求教啊

Answer 1

今天刚好也研究这个。。我用的webpack和vue-resource@0.9.3

都是在main.js中：

1.引入依赖：

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

2.如果想ajax请求有progress，加载vue-resource的interceptors中：

Vue.http.interceptors.push((request, next) => {
  NProgress.start();  next((response)=>{
    NProgress.done();
  });
});

3.如果想路由跳转有progress，加在vue-router的beforeEach和afterEach中：

router.beforeEach(transition => {
  NProgress.done();});router.afterEach(transition => {
  NProgress.start();});

PS: 我这里有些奇葩的是beforeEach在afterEach之后执行。。。。所以我只能在afterEach中start了。。