Question

我在导航到路线之前已经实现了数据提取，即在从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

Answer 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中创建一个侦听器。此演示项目中未添加此特定流程

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

Vuejs：导航到路线之前的数据提取进度条

1 个答案: