Vuejs：在导航到路由之前获取数据的进度条答案

【问题标题】：Vuejs :progressbar on data fetching before navigating to routeVuejs：在导航到路由之前获取数据的进度条
【发布时间】：2018-07-08 23:40:28
【问题描述】：

我在导航到路由之前实现了数据获取，即在从 API 加载数据之前不会加载路由。

一切正常，但我想在路线加载时添加进度条，但文档没有说明实现。

这是我的代码

import axios from 'axios';
export default {


data () {
    return {
      post: null,
      error: null
    }
  },

 beforeRouteEnter (to, from, next) {
      axios.get('https://jsonplaceholder.typicode.com/posts/1').then((response,error)=>{
      next(vm => vm.setData(response, error))
    })
  },

   beforeRouteUpdate (to, from, next) {
    this.post = null
    axios.get('https://jsonplaceholder.typicode.com/posts/1fh').then((response,error)=>{
      this.setData(response,error)
      next()
    })
  },

  methods: {

    setData (response,error) {

           if (error) {
                console.log("Error",error);
            this.error = err.toString()
           } else {
            this.post = response.data
           }     
    }
 }


}

组件

<div class="post">
     <h2>Sample child</h2>

    <div v-if="error" class="error">
      {{ error }}
    </div>

    <div v-if="post" class="content">
      <h2>{{ post.title }}</h2>
      <p>{{ post.body }}</p>
    </div>
  </div>

这将在我点击路线me/posts时加载

官方文档 https://router.vuejs.org/en/advanced/data-fetching.html

【问题讨论】：

标签： javascript node.js vuejs2 vue-router

【解决方案1】：

我将分享我遵循的实现逻辑的方法，该逻辑需要在等待 AJAX 响应时显示加载图标。组件生命周期钩子created() 将用于实现此功能

用于显示加载图标的方法也可以通过少量修改替换为进度条。

您可以查看我在 github 中的 vuejs 项目，这将有助于理解我在这里试图描述的内容 https://github.com/divine3/vuejs/tree/master/basic

我是如何实现这个逻辑的

创建一个 Loading.vue 组件。
设置 eventBus。
从任何其他组件到 Loading.vue 的通信只能通过 eventBus 发生
使用来自 created() 钩子的 eventBus 发出事件。当映射到路由的组件被调用（即当路由改变时）时，将发生此事件发射。
在 Loading.vue 组件上创建监听器
一旦在路由更改期间发出事件，Loading.vue 组件上的 Listener 将收到该事件并显示加载图标。
在这个演示项目中（在我的 github 中），Loading.vue 组件本身将具有删除加载图标的控件。
要自动删除加载器，必须通过 eventBus 发出一个新事件，并且必须在 Loading.vue 中创建一个监听器。此演示项目中未添加此特定流程

如果我们为http://localhost:8081/#/planet添加书签并通过浏览器触发它，因为组件的创建顺序，使用beforeRouteEnter来实现相同的逻辑不起作用。

【讨论】：