如何显示“加载”正在加载延迟加载的路由组件时动画？ [英] How to display a "loading" animation while a lazy-loaded route component is being loaded?

问题描述

我已经使用webpack的代码拆分功能将我的应用分成多个块，以便在用户访问我的网页时不会下载整个应用程序包。

I have split my app into multiple chunks with webpack's code splitting feature so that the entire application bundle isn't downloaded when the user visits my webpage.

块某些路由需要的数据可能相当大，可能需要花费相当多的时间才能下载。这很好，除非用户在点击内部链接时不知道页面实际上正在加载，所以我需要以某种方式显示加载动画或其他东西。

The chunks that some routes require can be reasonably large and may take a noticeable amount of time to download. This is fine, except the user is not aware that the page is actually loading when they click an internal link, so I need to somehow display a loading animation or something.

我的路由器配置如下：

[
  {
    path: '/',
    component: () => import(/* webpackChunkName: 'landing' */ './landing.vue'),
  },
  {
    path: '/foo',
    component: () => import(/* webpackChunkName: 'main' */ './foo.vue'),
  },
  {
    path: '/bar',
    component: () => import(/* webpackChunkName: 'main' */ './bar.vue'),
  },
]

高级异步组件在Vue.js指南中展示了如何在解析组件时显示特定的加载组件 - 这正是我需要的，但它也说：

Advanced Async Components in the Vue.js guide shows how to display a particular "loading" component while the component is being resolved -- this is exactly what I need, however it also says:

请注意，当在vue-router中用作路由组件时，这些属性将被忽略，因为在路由导航发生之前会先解析异步组件。

Note that when used as a route component in vue-router, these properties will be ignored because async components are resolved upfront before the route navigation happens.

如何在vue-router中实现这一目标？如果这是不可能的，延迟加载的组件对我来说几乎没用，因为它会给用户带来糟糕的体验。

How can I achieve this in vue-router? If this is not possible, lazily-loaded components would be pretty much useless to me because it would provide a poor experience to the user.

推荐答案

您可以使用导航防护来激活/停用显示/隐藏加载组件的加载状态：

You can use navigation guards to activate/deactivate a loading state that shows/hides a loading component:

如果您想使用nprogress之类的东西，可以这样做：

If you would like to use something like "nprogress" you can do it like this:

http：// jsfiddle .net / xgrjzsup / 2669 /

const router = new VueRouter({
  routes
})

router.beforeEach((to, from, next) => {
  NProgress.start()
  next()
})
router.afterEach(() => {
  NProgress.done()
})

或者，如果你想在原地显示：

Alternatively, if you want to show someting in-place:

http://jsfiddle.net/h4x8ebye/1/

Vue.component('loading',{ template: '<div>Loading!</div>'})

const router = new VueRouter({
  routes
})

const app = new Vue({
  data: { loading: false },
  router
}).$mount('#app')

router.beforeEach((to, from, next) => {
  app.loading = true
    next()
})

router.afterEach((to, from, next) => {
  setTimeout(() => app.loading = false, 1500) // timeout for demo purposes
    next()
})

然后在模板中：

<loading v-if="$root.loading"></loading>
  <router-view v-else></router-view>

这也很容易被一个非常小的组件包围，而不是使用$ root组件进行加载州。

That could also be easily encasulated in a very small component instead of using the $root component for the loading state.

这篇关于如何显示“加载”正在加载延迟加载的路由组件时动画？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！