实现路由切换显示进度条效果

实现路由切换显示进度条

在进行页面路由跳转的时候，如果页面的资源过多或者网络较差的情况下，页面的加载速度很慢，而且用户也不知道加载到了那一步，进度到了哪里。这个时候在页面顶部添加一个进度条可以很好的增加用用户的体验。

使用 nprogress 可以很好地实现这个效果。

1.安装

// 下载安装
npm i nprogress   //这个没有类型声明文件
npm i @type/nprogress -D    //在type文件中声明一个类型文件
import 'nprogress/nprogress.css'   //引入样式

2. 使用

//  1.在路由切换前开启
router.beforeEach((to) => {
  NProgress.start()  //开启加载效果

// 2.路由切换完毕后关闭
 router.afterEach(() => {
  NProgress.done() //关闭
})
    
//如果想要覆盖进度条的颜色  可以在main.scss中修改
    
#nprogress .bar{
  background-color 想要的颜色 !important;
  }
                  
//取消右上角的小圈圈   需要进行插件配置
NProgress.configure({
  showSpinner: false
})

实现效果如下