vue-skeleton-webpack-plugin 骨架屏结束的时机,能否在组件加载完数据之后

目前遇到的问题是骨架屏展示结束之后,页面还是要去请求数据,还是会有一段时间的白屏效果

May 16 '18 02:05 HenryWong-fe

目前骨架屏的 HTML 会被插入项目的 Vue 挂载点里，默认情况是 <div id="app">，也可以配置。这样调用 $mount() 方法时，骨架屏内容就会被真实内容替换掉，也就不再展示了。

所以我理解页面请求数据的时机和调用 $mount() 方法的时机才是关键。

比如我们目前在 Lavas 项目中的做法是：

JS 加载完成后立即调用 $mount() 渲染 App.vue，这样头部立即出现，骨架屏内容已经被替换掉了。
把页面请求数据的操作放在路由页面的钩子中，也就是渲染路由页面前先获取需要的数据，在这期间加上 Loading 提示。

May 16 '18 06:05 xiaoiver

我理解是加载完js是不是骨架屏的内容就被替换掉了，请求的数据还没回来的话还是会白屏。是不是可以在请求数据回来之后再执行$mount,类似ssr那样写一个async方法

May 23 '18 15:05 wlxscn

我发现，骨架屏内容没有被真实内容替换掉，还在页面显示呢。我要在下面的代码里插入骨架屏，但是发现骨架屏的代码在<div class="loginheadercontainer">这个dom之上还存在着不知道是什么原因，是不是我哪里写错了：

<body>
	<div class="m_main" id="loginpage">
		<div class="loginheadercontainer">
			<div class="leftarea">&nbsp;</div>
			<div class="loginheader">
				<div class="logo"></div><!--
			 --><div class="text">
					<span>XXXXXX</span>
				</div>
			</div>
			<div class="rightarea">&nbsp;</div>
		</div>
	</div>
</body>

配置如下：

new SkeletonWebpackPlugin({
	webpackConfig: {
		entry: skeletonEntries
	},
	insertAfter:'<div class="m_main" id="loginpage">'
}),

Jul 02 '18 03:07 martinko2009

@martinko2009，从你的代码上看，构建阶段 Skeleton 插入到 HTML 这一步是 OK 的。然后在 Vue 运行之后，如果挂载点也是 <div class="m_main" id="loginpage">，Skeleton 内容等于是被覆盖掉了：

new MyComponent().$mount('#loginpage')
// 同上
new MyComponent({ el: '#loginpage' })

Jul 03 '18 06:07 xiaoiver

目前遇到的问题是骨架屏展示结束之后,页面还是要去请求数据,还是会有一段时间的白屏效果？而且第一次访问页面会出现骨架，但是第二次再次进入的话还是请求也是白屏。这样效果很不好

Aug 31 '18 07:08 confidencefnt

多路由，path必须是类似 /page1， /page2，但是/page1?source=xxx这样子无效

Aug 31 '18 07:08 confidencefnt

@confidencefnt ，确实是一个 bug，应该是字符串转成的正则有问题，后续修复情况可以关注 #45 另外 path 除了字符串，也支持正则的（稍后会完善下文档说明）。可以直接写 path: /^\/page1/ 这样就能匹配 /page1?source=xxx 了。

Sep 13 '18 01:09 xiaoiver

我感觉调整 $mount() 时机肯定不靠谱啊，比如：我的数据依赖 Vuex 、还做了 Vue-router 导航守卫，这些都得先初始化 Vue ，可不可以换种思路，骨架屏提供一些接口（显示、隐藏），默认自己页面的元素都被隐藏，而骨架屏的容器高于 #app ，当自己需要的数据处理完成，需要显示页面时，调用骨架屏接口让其隐藏。

当然，只是一个思路。