在 Vue 单页面应用 (SPA) 开发过程中，为了提升应用的用户体验，我们可以采用全局 Loading 效果来提示用户当前页面正在加载数据。本文将介绍如何在 Vue SPA 应用中实现全局 Loading 效果的方法。
实现思路
实现全局 Loading 效果的方法有很多种，这里我们采用以下思路：
- 在 App.vue 组件中添加一个全局 Loading 组件。
- 在路由切换时，通过路由守卫来控制全局 Loading 组件的显示和隐藏。
添加全局 Loading 组件
在 App.vue 组件中添加一个全局 Loading 组件：
-- -------------------- ---- -------
----------
-----
---- -- ------- -- ---
-------- ---------------------------
---- --- ---
---------------------------
------
-----------
--------
------ ------- ---- ---------------------------
------ ------- -
----------- -
-------
--
------ -
------ -
---------- ----- -- ---- ------- --------
--
-
--
---------控制全局 Loading 显示和隐藏
我们可以采用 Vue 路由守卫的 beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave 方法来控制全局 Loading 组件的显示和隐藏。
在路由切换前，我们可以先设置 isLoading 为 true，表示全局 Loading 组件需要显示出来；在路由切换完成后，再设置 isLoading 为 false，表示全局 Loading 组件需要隐藏。
-- -------------------- ---- -------
--------
------ ------- -
-------------------- ----- ----- -
-- ---------- ------- --
------- -- -
------------ - -----
---
--
--------------------- ----- ----- -
-- ---------- ------- --
-------------- - -----
-------
--
-------------------- ----- ----- -
-- ---------- ------- --
-------------- - ------
-------
-
--
---------完整示例代码
下面是一个完整的示例代码，你可以直接复制代码到你的项目中进行测试。
App.vue：
-- -------------------- ---- -------
----------
-----
---- -- ------- -- ---
-------- ---------------------------
---- --- ---
---------------------------
------
-----------
--------
------ ------- ---- ---------------------------
------ ------- -
----------- -
-------
--
------ -
------ -
---------- ----- -- ---- ------- --------
--
--
-------------------- ----- ----- -
-- ---------- ------- --
------- -- -
------------ - -----
---
--
--------------------- ----- ----- -
-- ---------- ------- --
-------------- - -----
-------
--
-------------------- ----- ----- -
-- ---------- ------- --
-------------- - ------
-------
-
--
---------Loading.vue：
-- -------------------- ---- -------
----------
---- ----------------
---- ------------------------------
------
-----------
-------
-------- -
--------- ------
---- --
----- --
------ -----
------- -----
----------------- ------- -- -- -----
-------- ----
-
---------------- -
--------- ---------
---- ----
----- ----
---------- --------------- ------
------- --- ----- --------
----------- --- ----- --------
-------------- ----
------ -----
------- -----
---------- ---- -- ------ ---------
-
---------- ---- -
-- -
---------- -------------
-
---- -
---------- ---------------
-
-
--------总结
本文介绍了在 Vue SPA 应用中实现全局 Loading 效果的方法，通过添加全局 Loading 组件和控制路由守卫来实现。你可以根据自己的需求，自定义 Loading 组件的样式和动画，提升你的应用用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64de7588f6b2d6eab39afb39