在前端开发中，实现网页路由切换时的进度条效果是非常常见和必要的。vue-navigation-progress-plugin 是一个用于 Vue.js 应用程序的进度条插件，可以方便地在路由导航时显示进度条，提供流畅的用户体验。
本文将介绍该 npm 包的使用方法，让你快速掌握如何在你的 Vue.js 应用中实现进度条特效。
1. 安装
安装 vue-navigation-progress-plugin 非常容易，只需要在终端中输入以下命令即可：
npm install vue-navigation-progress-plugin --save
然后在你的 App.vue 文件中，引入插件并实例化一个 VueRouter 对象：
-- -------------------- ---- ------- ------ --------- ---- ------------ ------ --------------------- ---- -------------------------------- ------------------ ------------------------------ ----- ------ - --- ----------- -- --- --
2. 配置
vue-navigation-progress-plugin 支持多种配置项，包括颜色、高度、位置等等。以下是一些常用选项的示例配置：
-- -------------------- ---- -------
------------------------------ -
------ ----------------------- -- -----
------- ------ -- -----
------------ ------ -- --------
---------- ---- -- -----
----------- -
------ ------- -- -------
-------- ------- -- ----------
------------ ---- -- ---------
-
--以上配置项都是可选的，可以根据自己的需求进行个性化的配置。
3. 使用
vue-navigation-progress-plugin 实现了 beforeRouteEnter 和 beforeRouteUpdate 导航守卫，在路由导航时自动触发进度条的显示和隐藏。
在模板中，只需添加一个 progress 组件即可展示进度条：
<progress />
也可以通过插槽自定义进度条的外观：
<progress> <div slot="background"></div> <div slot="progress"></div> </progress>
4. 示例代码
以下是一个简单的使用示例，包含了路由导航、进度条样式等配置：
-- -------------------- ---- -------
------ --- ---- -----
------ --------- ---- ------------
------ ---- ---- -----------------------
------ ----- ---- ------------------------
------ --------------------- ---- --------------------------------
------------------
------------------------------ -
------ ----------
------- ------
------------ ------
---------- ----
----------- -
------ -------
-------- -------
------------ ----
-
--
----- ------ - -
- ----- ---- ---------- ---- --
- ----- --------- ---------- ----- -
-
----- ------ - --- -----------
------ -- -- ------- ------
--
--- -----
------
------------------- -------------------- ---- -------
---- ------- ---
----------
---- ---------
----------
---- ------------------------
---- ----------------------
-----------
------------ --
------
-----------
-------
-- ----- --
-------- -
--------- ------
---- --
----- --
------ --
------- ----
-------- -----
--------- -------
----------------- --------
-
-------- -------------------- -
--------- ---------
------ -----
------- -----
----------------- ------
-
-------- ------------------ -
--------- ---------
------- -----
----------------- --------
-
--------以上代码可以在前往路由页面时展示进度条特效，具有指导意义和参考价值。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600560d881e8991b448df1b2