vue 如何使用 nprogress

kratsstark
  • 93

现在有这个需求,希望每次页面载入的时候,浏览器顶部有载入动画
可以叫作 top progress bar 。我现在的做法是 用 vue-progressbar 这个插件 github链接
但是我需要每个页面的ready() 和 created() 里面都要写代码,特别繁琐。

之前在 vue 论坛 看见一个人说的是 在 vue-route 里面 beforeEach 和 afterEach 使用 nprogress 。。但是我问他 就没有下文了。。
nprogress bar 的官方地址 github 连接

大家有谁用过这个????? 求教啊

回复
阅读 11.5k
5 个回答
✓ 已被采纳

今天刚好也研究这个。。我用的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了。。

文档 router.beforeEach(hook)
文档 router.afterEach(hook)

router.beforeEach(function (transition) {
  NProgress.start();
});

router.afterEach(function (transition) {
  NProgress.done();
  NProgress.remove();
});

大概就是这样使用吧。beforeEachafterEachvue-router 提供的回调接口。在before启动NProgressafter删除。

载入动画的话 $loadingRouteData 这个就够了啊

给你 贴个文档描述

data 切换钩子会在 activate 被断定( resolved )以及界面切换之前被调用。切换进来的组件会得到一个名为 $loadingRouteData 的元属性,其初始值为 true ,在 data 钩子函数被断定后会被赋值为 false 。这个属性可用来会切换进来的组件展示加载效果。

地址 http://router.vuejs.org/zh-cn...

楼主,想问你一下,如果使用vue-progress这个插件,那么如何在路由的钩子函数如beforeEach和afterEach中调用该插件的方法呢。因为$Progress是一个全局变量,在组件中可以通过this.$Progress中调用。但是在路由钩子中,组件实例都还不存在啊,就没法调用啊。

如果是使用nprogress,是可以在路由的钩子函数中调用NProgress的方法。但是这样的话,在每个组件中必须通过

import NProgress from "nprogress"

才能引入NProgress对象啊。感觉这样很重复啊。

不知道楼主最后的解决办法是什么?

你知道吗?

宣传栏