后台管理项目中如何实现顶部进度条效果

首先安装

npm i nprogress
# 或者
yarn add nprogress

除了功能外，进度条还有样式，首先需要在main.js中引入样式

import 'nprogress/nprogress.css'

在router/index.js中，引入该模块

import nprogress from 'nprogress'

在全局前置守卫中 路由跳转之前去开启nprogress

router.beforeEach((to,from,next)=>{
  
  //在路由跳转之前开启
  nprogress.start()

  //只要访问的不是登录/login 就跳转到/login
  if(to.path === '/login'){
    next()
  }else{
   //拿到localstorage中的token
   const token = localStorage.getItem('token')
   if(token){
     //如果访问的不是login 但是已经登录了 则正常跳转
     next()
   }else{
     next('/login')
   }
  }
})

在路由跳转结束之后（路由后置钩子）调用done方法结束

//路由后置钩子
router.afterEach(()=>{
  //路由跳转结束之后 进度条结束
  nprogress.done()
})

如以下效果