nuxt 本身有自己的 $loading 作为进度条的显示，但是也可以用 nprogress 这个轻量级的插件

首先安装 nprogress

npm i nprogress -S

在 nuxt 的工程中有一个 plugins 文件夹中的 router.js 文件中引入

import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
/*全局配置 加载条*/
NProgress.configure({   
     // 动画方式
    easing: 'ease-out-in',   
    // 递增进度条的速度
    speed: 700,    
    // 是否显示加载ico
    showSpinner: false,
    // 自动递增间隔     
    trickleSpeed: 200,   
    // 初始化时的最小百分比
    minimum: 0.3  
})
export default ({ app}) => {  
    app.router.beforeEach((to, from, next) => {      // 进度条开始
      NProgress.start();    
      next()  
    })  
    app.router.afterEach((to, from, next) => {
     // 进度条结束
     NProgress.done();  
    })
}

将 router.js 在项目中引用，需要在 nuxt.config.js 里面

 plugins: [    
    ...    
    { src: '~/plugins/router.js', ssr: false },
    ... 
]