在使用 Vue.js 构建单页应用程序时，我们经常会遇到页面跳转时出现的页面闪烁问题。这个问题最常见于使用 Vue Router 进行路由跳转时，当页面切换时，页面的内容会短暂地消失，然后重新渲染。这种闪烁问题不仅影响了用户的体验，还会影响应用程序的性能。
在本文中，我们将介绍如何解决 Vue.js SPA 页面跳转时的页面闪烁问题。我们将深入探讨这个问题的原因，并提供一些实用的解决方法和指导意义。
问题原因
页面闪烁问题通常是由于两种情况引起的：第一种情况是 Vue.js 应用在加载时需要一些时间来完成渲染，而路由跳转的过程中，页面的内容会短暂地消失，因此会出现页面闪烁问题。第二种情况是当 Vue Router 进行路由跳转时，由于默认情况下 Vue.js 会重新渲染整个页面，而页面中的样式和脚本文件需要重新加载，因此会出现页面闪烁问题。
解决办法
1. 使用 keep-alive 组件
Vue.js 提供了一个 keep-alive 组件，可以将组件缓存到内存中，以避免在页面切换时重新渲染。在使用 Vue Router 进行路由切换的时候，可以在路由组件的根元素上添加 keep-alive 组件，以避免页面闪烁问题的发生。
<template>
<div>
<keep-alive>
<router-view></router-view>
</keep-alive>
</div>
</template>使用 keep-alive 组件可以有效地避免页面闪烁问题的发生。但是需要注意的是，使用 keep-alive 组件可能会导致应用程序的内存占用过高，因此在使用时需要根据实际情况进行权衡。
2. 使用 transition 组件
在 Vue.js 应用中，transition 组件可以用来在元素被插入或删除时添加过渡效果。我们可以利用 transition 组件在页面切换时添加过渡效果，以减缓页面闪烁的影响。
-- -------------------- ---- -------
----------
----------- ------------
---------------------------
-------------
-----------
-------
------------------- ------------------ -
----------- ------- ----
-
------------ ------------------ -
-------- --
-
--------在上述代码中，我们在路由组件的根元素上添加了 transition 组件，并为该组件指定了一个 fade 的过渡名称。在样式表中，我们为 fade 组件定义了两种过渡状态：fade-enter 和 fade-leave-active，以及两种状态过渡时的样式：fade-enter-active 和 fade-leave-active。
通过使用 transition 组件，我们可以在页面切换时添加过渡效果，从而减轻页面闪烁的影响。但是需要注意的是，使用 transition 组件可能会导致应用程序的性能下降，因此在使用时需要根据实际情况进行权衡。
3. 加载时使用骨架屏
骨架屏是一种在数据加载完成前展示的占位符，可以在加载完成前提高页面的视觉效果，从而减轻页面闪烁的影响。我们可以使用骨架屏来优化 Vue.js 应用的界面加载，以避免页面闪烁问题的发生。以下是一个简单的骨架屏示例：
-- -------------------- ---- -------
----------
-----
---- ---------------- -----------------------
---- ------ ----------------
---- ---- ---
------
------
-----------
-------
--------- -
------- ------
----------------- -----
-
--------
--------
------ ------- -
------ -
------ -
--------- ------
-- ----
-
--
--------- -
-- ----
-- --------- -------- -- ----
-
-
---------在上述示例中，我们首先在模板中使用 v-if 指令判断数据是否已经加载完成。如果数据没有加载完成，则显示一个占位符，随后在 mounted 钩子函数中加载数据，并在加载成功后将 isLoaded 置为 true。这样，在数据加载完成后，页面就会显示正常的内容，而不是占位符，避免了页面闪烁问题的发生。
总结
在本文中，我们介绍了使用 Vue.js 构建的 SPA 页面跳转时页面闪烁的问题，并提供了三种解决方法：使用 keep-alive 组件、使用 transition 组件、加载时使用骨架屏。不同的解决方法适用于不同的场景，我们需要根据实际情况进行选择。通过合理地使用这些解决方法，我们可以优化 Vue.js 应用程序的性能，提升用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6497ae0748841e98944b1bd6