How to achieve the top progress bar effect in background management projects

First installation

npm i nprogress
#  perhaps 
yarn add nprogress

Besides the function , The progress bar also has styles , The first thing you need to do is main.js Introducing style

import 'nprogress/nprogress.css'

stay router/index.js in , Introduce the module

import nprogress from 'nprogress'

In the global front guard Start the route before jumping nprogress

router.beforeEach((to,from,next)=>{
    
  
  // Turn on before route jump 
  nprogress.start()

  // As long as the access is not login /login  Jump to /login
  if(to.path === '/login'){
    
    next()
  }else{
    
   // Get localstorage Medium token
   const token = localStorage.getItem('token')
   if(token){
    
     // If it's not login  But I have logged in   Then jump normally 
     next()
   }else{
    
     next('/login')
   }
  }
})

After the route jump ends （ Route post hook ） call done Method end

// Route post hook 
router.afterEach(()=>{
    
  // After the route jump is completed   The progress bar ends 
  nprogress.done()
})

Such as the following effect