javascript – 如何在加载延迟加载的路由组件时显示“加载”动画？

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

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

我的路由器配置如下：

[
  {
    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显示了在解析组件时如何显示特定的“加载”组件 – 这正是我需要的,但它也说：

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中实现这一点？如果这是不可能的,延迟加载的组件对我来说几乎没用,因为它会给用户带来糟糕的体验.

解决方法:

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

如果你想使用像“nprogress”这样的东西,你可以这样做：

http://jsfiddle.net/xgrjzsup/2669/

const router = new VueRouter({
  routes
})

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

或者,如果您想要在场显示某些内容：

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组件来加载状态.

标签：vue-router,javascript,webpack,vue-js
来源： https://codeday.me/bug/20191003/1851254.html