Vue中nprogress页面加载进度条的方法实现

在NProgress.configure({})中我们可以对nprogress进行适当的配置，showSpinner 为 false、trickle 为 false、trickleRate 、trickleSpeed 、ease、speed 、minimum 等等。在添加在main.js中全局钩子函数，在路由跳转前用NProgress.start()标记下进度条开始，在路由跳转后用NProgress.done()标记下结束，这样在路由跳转的时候就可以在页面顶部看到一个progress bar进度条了如果你希望每次发送请求的时候也出现进度条的话可以在axios封装中的路由拦截中添加nprogress为了让结构更滑清晰简洁些，我们重新整理下代码，即然nprogress主要是用在路由跳转上，这里我将nprogress归纳放入router中，切记实例化router之后调用Vuerouter的beforeEach与afterEach钩子函数生效。