前言
在开发单页面应用（SPA）时，由于所有页面都在同一个页面中切换，因此在页面切换时，需要有一个全局的 loading 效果，以便提醒用户页面正在加载中。
本文将介绍如何使用 vue-router 实现 SPA 应用全局 loading 效果，并解决相关 bug。
实现原理
vue-router 提供了全局的导航钩子（navigation guards），可以在路由切换时执行一些操作，例如在路由切换前显示 loading，路由切换后隐藏 loading。
在 vue-router 中，导航钩子分为全局的导航钩子和路由独享的导航钩子。
全局的导航钩子包括：
- beforeEach: 在路由切换前执行
- afterEach: 在路由切换后执行
路由独享的导航钩子包括：
- beforeEnter: 在路由切换前执行，只对当前路由有效
- beforeRouteUpdate: 在当前路由复用时执行
- beforeRouteLeave: 在离开当前路由时执行
在本文中，我们将使用全局的导航钩子实现 SPA 应用全局 loading 效果。
实现步骤
第一步：创建全局的 loading 组件
在 src/components 目录下创建一个 Loading.vue 组件，代码如下：
-- -------------------- ---- -------
----------
---- ----------------
---- ------------------------------
------
-----------
-------
-------- -
--------- ------
---- --
----- --
------ --
------- --
----------------- ------- -- -- -----
-------- -----
---------------- -------
------------ -------
-------- -----
-
---------------- -
------ -----
------- -----
-------------- ----
------- --- ----- -----
----------------- --------
---------- ---- -- ------ ---------
-
---------- ---- -
-- -
---------- ---------------
-
-
--------第二步：在 App.vue 中引入全局的 loading 组件
在 App.vue 中引入全局的 loading 组件，并在页面中添加一个 <router-view> 标签，代码如下：
-- -------------------- ---- -------
----------
---- ---------
---------------------------
-------- -------------------------
------
-----------
--------
------ ------- ---- ---------------------------
------ ------- -
----------- -
-------
--
------ -
------ -
-------- -----
--
--
--------- -
---------------------------- ----- ----- -- -
------------ - -----
-------
---
------------------------- -- -
------------ - ------
---
-
--
---------在 created 钩子中，我们使用 this.$router.beforeEach 在路由切换前显示全局 loading 组件，使用 this.$router.afterEach 在路由切换后隐藏全局 loading 组件。
第三步：解决相关 bug
1. 多次快速切换路由时，loading 显示异常
当用户快速切换多个路由时，可能会出现 loading 显示异常的问题，即 loading 显示不出来或者 loading 显示了但是没有隐藏。
解决方法是在显示 loading 时设置一个计数器，每次显示 loading 时计数器加一，每次隐藏 loading 时计数器减一，只有计数器为零时才隐藏 loading。
代码如下：
-- -------------------- ---- -------
----------
---- ---------
---------------------------
-------- -------------------------
------
-----------
--------
------ ------- ---- ---------------------------
------ ------- -
----------- -
-------
--
------ -
------ -
-------- ------
------ -
--
--
--------- -
---------------------------- ----- ----- -- -
-------------------
-------
---
------------------------- -- -
-------------------
---
--
-------- -
------------- -
-------------
------------ - -----
--
------------- -
-------------
-- ----------- --- -- -
------------ - ------
-
-
-
--
---------2. 路由切换时，滚动条位置不正确
当用户在一个页面中滚动到底部后切换到另一个页面，会发现新页面的滚动条位置不是在页面顶部，而是在原来页面的滚动位置。
解决方法是在路由切换后，手动将滚动条位置设置为页面顶部。
代码如下：
-- -------------------- ---- -------
----------
---- ---------
---------------------------
-------- -------------------------
------
-----------
--------
------ ------- ---- ---------------------------
------ ------- -
----------- -
-------
--
------ -
------ -
-------- ------
------ -
--
--
--------- -
---------------------------- ----- ----- -- -
-------------------
-------
---
------------------------- -- -
-------------------
------------------ ---
---
--
-------- -
------------- -
-------------
------------ - -----
--
------------- -
-------------
-- ----------- --- -- -
------------ - ------
-
-
-
--
---------总结
通过本文的介绍，我们学习了如何使用 vue-router 实现 SPA 应用全局 loading 效果，并解决了相关 bug。在实际开发中，我们可以根据需求自定义 loading 组件，以便更好地满足业务需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65fe346cd10417a2229781a5