当你打开一个页面，页面显示空白或者部分空白，那么用户就会怀疑你的网页是不是有问题。我们需要让我们的用户知道数据在路上，当他们点击一个需要请求数据链接时，就会给出反馈，让用户知道页面的加载情况

一、NProgress（一个轻量级进度条组件）

1. 借用 axios 拦截器组合实现
2. 通过组件内的路由守卫实现
3. 通过路由的全局前置守卫实现

---

二、解决方案 1：NProgress 与 axios interceptors

1）安装NProgress

$ npm install nprogress

2） 安装好之后，需要在main.js中引入CSS

import "nprogress/nprogress.css";

3） 最后在axios中引入NProgress

import NProgress from "nprogress";

NProgress 提供四个基本 API

NProgress.start(); // 开始展示进度条
NProgress.set(0.4); // 设置进度百分比
NProgress.inc(); // 以随机量递增进度
NProgress.done(); // 完成进度条
// 配置进度条
NProgress.configure({
  minimum: 0.08, // 配置开始初始值，默认0.08
  template: `
      <div class="bar" role="bar">
         <div class="peg"></div>
     </div>
     <div class="spinner" role="spinner">
         <div class="spinner-icon"></div>
      </div>
 `, // 配置模板
  easing: "linear", // 配置动画
  speed: 200, //配置速度
  trickle: true, // 是否让进度条自动增加
  trickleSpeed: 200, // 配置自动前进的频率ms
  showSpinner: true, //是否显示加载动画，如下图
  parent: "body", //配置挂载元素，即相对定位的元素
});

AXIOS 拦截器允许我们拦截我们的请求和响应，添加额外的功能，我们可以在其中启动和停止进度条，一个简单的功能如下所示：

1 axios.interceptors.request.use(config => {
2     NProgress.start()
3     return config
4 })
5 axios.interceptors.response.use(response => {
6     NProgress.done()
7     return response
8 })

正如您所看到的，AXIOS 拦截器充当中间件，允许您在发出请求时或在接收到响应时运行某些代码

总结：这是一个有效的解决方案，可能对你很有用，但有两个注意事项你应该知道。

不适合同时进行多个 API 调用 在我们使用两个或更多的 API 调用来加载页面之前，这种方法需要一些改进。在这个场景中，我们希望持续显示进度条，直到所有 API 调用返回为止。此问题的常见解决方案是创建一个保存加载状态的加载 Vuex 模块。

在返回 API 调用之前首屏呈现一定的空白 在某些网页上，在数据完全之前看到该页的部分元素并不是很好的用户体验，最好是拿到数据后在进行渲染。我们来看看其他的方案

---

三、解决方案 2：组件内的路由守卫 beforeRouteEnter

同样的我们安装 nprogress,并在 main.js 中引入 css

不同的是我们这次在对应的页面组件中引入 NProgress，而不是在请求中

实例如下：

  //page.vue
   import store from './store'
   import NProgress from 'nprogress'

   //组件渲染之前的生命周期函数
   beforeRouteEnter(routeTo、routeFrom、next){
       NProgress.start()// 启动进度条
       // 由于组件尚未创建，因此不能在此处使用this关键字。
       store.dispatch('event/fetchEvent,routeTo.params.id).(data => {
         console.log(data)// 获取数据
         NProgress.done()// 当操作完成时，完成进度条
         next()// 只有调用此命令，导航才会继续
     })
 }

这样我们就能确保获取到组件渲染所需的数据后才渲染组件

---

四、解决方案 3：路由全局守卫与单路由守卫 Global and Per-Route Guards

同样的先安装引入 NProgress

在 route.js 中引入 NProgress

 // route.js
 // 在每个路由行为之前
 router.beforeach((routeTo, routeFrom, next) => {
     //启动路由进度条
     NProgress.start（）
     next()
 })
 // 在每个路由行为之后
router.afterEach(() => {
    // 完成路由进度条
    NProgress.done()
})

这样我们已经初步完成 NProgress 的布置，但是我们还是需要在确保页面数据都请求到之后才执行 router.afterEach，有两种方法：

在页面中使用 beforeRouteEnter 生命周期函数，但是这里推荐使用下一种方案 在路由列表中使用 beforeEnter 守卫，配合使用 props,我们可以将 vuex 从页面组件中移除，这样我们的组件会变得更加的简洁，也更容易维护

  Vue.use(Router)
   const router = new Router({
       mode: 'history',
       routes: [
           {
               path: '/event/:id',
               name: 'event-show',
               component: EventShow,
             props: true,
             beforeEnter(routeTo, routeFrom, next) {
                 store.dispatch('event/fetchEvent', routeTo.params.id).then(event => {
                     routeTo.params.event = event
                     next()
                 })
             }
         }
     ]
 }

单独的配置路由列表，无数据请求的路由页，进度条可以瞬间完成，配置 beforeEnter 的将等待数据请求成功后才渲染组件。 另外，这样通过组件传参的方式将数据传递到组件中，可以将 vuex 从组件中移除，优化了组件，使其更加具有维护性