vue 如何实现 loading 读条，加载完成后显示页面？

[LeeReamond]

以前都是做单个组件的 axios 回调绑定加载完成事件，感觉还比较简单，现在想做一个全局读条，不会做了

具体分为两个问题，其一是如何让用户在第一次打开页面时读一个条。比如用户第一次访问我的网站，而我的前端 spa 体积比较大，可能读个一两秒钟，这段时间我要在 vue 还没加载完成之前放一个 loading，然后等 vue 加载完成之后删掉这个 loading，没想好怎么做。

其二是 vue 加载完成之后，单个路由页面的 loading，比如用户默认打开 index.html 之后，这时候 vue 的 js 已经在本地了，现在想跳转到 catalogue 页面，这个页面需要再额外加载若干图片和 css/js 脚本，我希望资源全部加载完成之前不要展示页面，这种应该怎么做呢？

[mx8Y3o5w3M70LC4y]

useEffect

[joesonw]

纯 html 放 loadong，加载完后再干掉。

[echowuhao]

https://stackoverflow.com/questions/50209003/how-to-use-nprogress-with-vuejs-code-splitting

[freak118]

@lvdb 能详细说说吗

[ch2]

在首屏的那个 html 里做 loading，等 js 啥的加载完了再让它消失

[LeeReamond]

@ch2
@joesonw
思路是这么个思路，但是具体操作怎么做呢，是类似让 vue 搜索 loading 的 id 然后干掉这个 element 么。

另外一个问题是 vue 怎么知道自己加载完成了，因为我用 vuetify 模板，还需要引入一些 google 字体和图标 css 之类的，可能还有图片

[LeeReamond]

@LeeReamond 试了一下往 index.html 里加东西。。结果变成不管哪个路由都会先闪过一下 loading 画面，感觉不太好

[kmore]

vue 生命周期函数 beforeCreate 实例初始化加入 loading，created 实例创建完成结束 loading,全局写个 mixin

[yesC]

如果用到 vue-router 的话可以看看路由守卫，可以配合组件 nprogress，这个效果和你说的需求很相似，可以参照着改改。

[WEBUG]

@LeeReamond 初次加载的 loading 写在 index.html 里面，写一个内部 css,在 index 最下方写 js 方法干掉 css 。其他阶段的 loading 就写在 vue 里面了。

[plk403]

我也有一个问题,怎样让当前路由的图片全部加载完之前显示 loading 呢? ? ? 就是判断图片全部加载完毕再显示页面...给跪了

[lh900519]

@LeeReamond 把 loading 的代码放到#app 元素里面，vue 开始渲染的时候，会把#app 里面的元素给替换掉

[iplayio2019]

我以前这么写过，写一个 loading 全局计数器，开始请求计数器加 1，请求完成计数器减 1，百分比增加百分 20，如果百分比小于 80%，直到计数器为 0 。

[cyrbuzz]

还有一个思路是用 SSR，Nuxt 里写 layout，这样就可以完全使用 Vue 的生命周期。

[cereschen]

都没说到点子上去 用异步组件 请阅读文档

[2kCS5c0b0ITXE5k2]

v-cloak?

[pouta]

看官方文档，全局路由守卫

[chouchoui]

https://github.com/PanJiaChen/vue-element-admin/blob/master/src/permission.js

vue-router 路由守卫 + nprogress

[zhuweiyou]

直接在 public/index.html 里面写 loading show

[cereschen]

我觉得直接说去看文档 确实有些不够负责任
我这里给出了示例代码 组件的加载完全由自己掌握

export default new Router({
routes: [
{
path: '/',
name: 'start-page',
component: () => ({
// 需要加载的组件 (应该是一个 `Promise` 对象)
component: new Promise(r => {
setTimeout(() => {
r(import('@/views/start'))
}, 2000);
}),
// 异步组件加载时使用的组件
loading: {
render(h) {
h('div', 'loading.....')
}
},
// 加载失败时使用的组件
error: {
render(h) {
h('div', 'error.....')
}
},
// 展示加载时组件的延时时间。默认值是 200 (毫秒)
delay: 5000,
// 如果提供了超时时间且组件加载也超时了，
// 则使用加载失败时使用的组件。默认值是：`Infinity`
timeout: 30000
})
}]
})