如何在Vue SPA中完成api请求之前添加加载程序

我进行了vue SPA，当我转到新路由时，页面将在我向服务器的请求完成之前加载，这意味着在数据显示之前将有0.5秒左右的延迟。我想添加一个加载程序，比如NProgress，它只在请求完成并加载所有内容后才会进入页面，这样数据就会立即出现，而不是我的元素为空，然后数据会在延迟后出现

我该怎么做

---

非常感谢如果为true，您可以使用isLoading布尔值有条件地呈现进度条，如果为false，则呈现组件的其余部分

我知道你提到了axios。不太可能，但如果在初始页面加载后不再进行任何API调用，则可以在axios实例中创建拦截器，在请求开始时将vuex状态设置为true，在请求结束时将其设置为false。然后，如果为true，您可以有条件地在App.vue中呈现进度条，如果为false，则在路由器视图中呈现进度条

import axios from 'axios'
import store from '@/store'

const api = axios.create({
  baseURL: 'URL',
})

api.interceptors.request.use(config => {
    store.commit('changeLoadingStatus', true)
    return config
  }, error => {
    // Handle errors
})

api.interceptors.response.use(response => {
    store.commit('changeLoadingStatus', false)
    return response
  }, error => {
    // Handle errors
})

export default api

---

我自己没有试过，但也许你可以试一下这样的

const router = new Router({
  routes: [
      { path: '/', name: 'home', component: Home },
      { path: '/about', name: 'about', component: About }
  ]
})

router.beforeResolve((to, from, next) => {
    // If this isn't an initial page load.
    if (to.name) {
        // Start the route progress bar.
        NProgress.start()
    }
    next()
})

router.afterEach((to, from) => {
    // Complete the animation of the route progress bar.
    NProgress.done()
})

---

您是否有任何文档的链接可以帮助您这样做？我没有，但添加了一个示例，说明您的axios实例可能是什么样子。changeLoadingStatus是一种改变isLoading状态的变异。