如何在加载延迟加载的路由组件时显示 "loading" 动画？

Question

我已经使用 webpack 的代码拆分功能将我的应用程序拆分为多个块，这样当用户访问我的网页时就不会下载整个应用程序包。

某些路由需要的块可能相当大，下载可能需要很长时间。这很好，除非用户在单击内部 link 时不知道页面实际上正在加载，因此我需要以某种方式显示加载动画或其他内容。

我的路由器是这样配置的：

[
  {
    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 显示了如何在解析组件时显示特定的 "loading" 组件——这正是我需要的，但它也说：

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

Answer 1

您可以使用导航守卫 activate/deactivate 加载状态 shows/hides 加载组件：

如果您想使用“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(() => {
  setTimeout(() => app.loading = false, 1500) // timeout for demo purposes
})

然后在模板中：

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

这也可以很容易地封装在一个非常小的组件中，而不是使用 $root 组件来加载状态。

Answer 2

不管它的价值，我将分享我最终为我的情况所做的事情。

我正在使用 Vuex，因此很容易创建任何组件都可以访问的 app-wide "loading" 状态，但您可以使用任何您想要共享此状态的机制。

简化后的效果是这样的：

function componentLoader(store, fn) {
  return () => {
    // (Vuex) Loading begins now
    store.commit('LOADING_BAR_TASK_BEGIN');

    // (Vuex) Call when loading is done
    const done = () => store.commit('LOADING_BAR_TASK_END');

    const promise = fn();
    promise.then(done, done);
    return promise;
  };
}

function createRoutes(store) {
  const load = fn => componentLoader(store, fn);

  return [
    {
      path: '/foo',
      component: load(() => import('./components/foo.vue')),
    },
    {
      path: '/bar',
      component: load(() => import('./components/bar.vue')),
    },
  ];
}

所以我所要做的就是用我的 load() 函数包装每个 () => import()，该函数负责设置加载状态。加载是通过直接观察 promise 来决定的，而不是依赖 router-specific before/after hooks.

Answer 3

你可以在vuejs的一个项目中使用这段代码做gobel路由

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()
})

如何在加载延迟加载的路由组件时显示 "loading" 动画？

How to display a "loading" animation while a lazy-loaded route component is being loaded?

javascript

webpack

vue.js

vue-router