vue 路由懒加载处理加载状态

发表于 更新于 分类于 阅读次数：

加载状态组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
// /xx dir/LazyLoadView.js
export default function LazyLoadView(AsyncView, needLoading = true) {
  // @see https://cn.vuejs.org/v2/guide/components-dynamic-async.html#%E5%A4%84%E7%90%86%E5%8A%A0%E8%BD%BD%E7%8A%B6%E6%80%81
  const AsyncHandler = () => ({
    // 需要加载的组件 (应该是一个 `Promise` 对象)
    component: AsyncView,
    // 异步组件加载时使用的组件
    loading: needLoading ? require('./LazyLoadLoading').default : null,
    // 加载失败时使用的组件
    error: needLoading ? require('./LazyLoadError').default : null
    // 展示加载时组件的延时时间。默认值是 200 (毫秒)
    // delay: 400,
    // 如果提供了超时时间且组件加载也超时了，则使用加载失败时使用的组件。默认值是：`Infinity`
    // timeout: 10000
  })

  return Promise.resolve({
    functional: true,
    render(h, { data, children }) {
      // 传递 context 的各种属性及 children 到视图组件.
      return h(AsyncHandler, data, children)
    }
  })
}

// /xx dir/LazyLoadLoading.js
export default {
  functional: true,
  render(h, context) {
    return <div>loading</div>
  }
}

// /xx dir/LazyLoadError.js
export default {
  functional: true,
  render(h, context) {
    return <div>error</div>
  }
}

启用加载状态组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
// /src/router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import LazyLoadView from '/xx dir/LazyLoadView'

Vue.use(VueRouter)

// ...

const routes = [
  {
    path: '/home',
    name: 'Home',
    component: () => LazyLoadView(import(/* webpackChunkName: "Home" */ '@/views/Home')),
    meta: { title: 'Home' }
  },

  {
    path: '/about',
    name: 'About',
    component: () => LazyLoadView(import(/* webpackChunkName: "About" */ '@/views/About')),
    meta: { title: 'About' }
  },

  //...

  // 404 page must be placed at the end !!!
  { path: '*', redirect: '/404', hidden: true }
]
// ...

LazyLoadView 导致组件内导航守卫失效问题解决方案

需要注意的是使用 LazyLoadView 会导致组件内导航守卫失效，这是我的一种尝试方案