现在有这个需求,希望每次页面载入的时候，浏览器顶部有载入动画
可以叫作 top progress bar 。我现在的做法是 用 vue-progressbar 这个插件 github链接
但是我需要每个页面的ready() 和 created（） 里面都要写代码，特别繁琐。
之前在 vue 论坛 看见一个人说的是 在 vue-route 里面 beforeEach 和 afterEach 使用 nprogress 。。但是我问他 就没有下文了。。
nprogress bar 的官方地址 github 连接
大家有谁用过这个？？？？？ 求教啊
天蓬老师2017-04-11 12:16:12
今天刚好也研究这个。。我用的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了。。
巴扎黑2017-04-11 12:16:12
文档 router.beforeEach(hook)
文档 router.afterEach(hook)
router.beforeEach(function (transition) {
NProgress.start();
});
router.afterEach(function (transition) {
NProgress.done();
NProgress.remove();
});大概就是这样使用吧。beforeEach、afterEach是 vue-router 提供的回调接口。在before启动NProgress在after删除。
怪我咯2017-04-11 12:16:12
载入动画的话 $loadingRouteData 这个就够了啊
给你 贴个文档描述
data 切换钩子会在 activate 被断定（ resolved ）以及界面切换之前被调用。切换进来的组件会得到一个名为 $loadingRouteData 的元属性，其初始值为 true ，在 data 钩子函数被断定后会被赋值为 false 。这个属性可用来会切换进来的组件展示加载效果。
地址 http://router.vuejs.org/zh-cn...
PHP中文网2017-04-11 12:16:12
楼主，想问你一下，如果使用vue-progress这个插件，那么如何在路由的钩子函数如beforeEach和afterEach中调用该插件的方法呢。因为$Progress是一个全局变量，在组件中可以通过this.$Progress中调用。但是在路由钩子中，组件实例都还不存在啊，就没法调用啊。
如果是使用nprogress，是可以在路由的钩子函数中调用NProgress的方法。但是这样的话，在每个组件中必须通过
import NProgress from "nprogress"才能引入NProgress对象啊。感觉这样很重复啊。
不知道楼主最后的解决办法是什么？