Vue3项目中使用NProgress进度条

在项目中安装

这里的包管理工具使用的npm，如果你使用的是yarn或者pnpm，请自行更改安装命令， 安装命令如下

    npm i nprogress -S

对NProgress封装

可以对NProgress进行一下封装，首先我们在utils目录下创建要给nporgress.js的文件，然后引入NProgress和CSS样式文件，示例代码如下：

    import NProgress from 'nprogress' 
    import 'nprogress/nprogress.css'

基础配置示例代码如下：

  //全局进度条的配置 
  NProgress.configure({ 
      easing: 'ease', // 动画方式 
      speed: 1000, // 递增进度条的速度 
      showSpinner: false, // 进度环显示隐藏
      trickleSpeed: 200, // 自动递增间隔 
      minimum: 0.3, // 更改启动时使用的最小百分比 
      parent: 'body', //指定进度条的父容器 
   })

最后可以封装两个方法一个开始一个结束

// 打开进度条 
    export const start = () => { 
        NProgress.start() 
    } 
// 关闭进度条 
    export const close = () => { 
        NProgress.done() 
    }

在Vue切换路由时展示进度条

现在我们就来使用我们上面封装的Nprogress，这里我们在VueRouter的配置文件中使用，实现切换路由时在顶部展示进度条，首先我们打开VueRouter的配置文件，然后引入我们封装的Nprogress：

  import { close, start } from '/@/utils/nprogress'

然后我们在创建的Router实例中使用这两个方法：

const router = createRouter({
    history: createWebHashHistory(),
    routes,
}) 

//beforeEach路由切换之前触发

router.beforeEach((pre, next) => { 
    start() //开始进度条
}) 

//afterEach路由切换之后触发

router.afterEach(() => { 
    close() //结束进度条
})  

完