全局loading进度条实现

安装这个插件

$ npm install --save nprogress

main.js中引入

import "nprogress/nprogress.css"

开启和关闭效果

NProgress.start();
NProgress.done();

封装到utils工具库中

import nprogress from 'nprogress'
// 显示全屏loading
export function showLoading(){
  nprogress.start()
}

// 隐藏全屏loading
export function hideLoading(){
  nprogress.done()
}

在全局守卫设置 只要路由发生变化就触发 开头加

router.beforeEach(async (to,from,next) => {
    // 显示loading
    showLoading()

修改loading进度条颜色 在App.vue中修改

#nprogress .bar{
  background-color: midnightblue !important;
  height: 3px !important;
}

页面渲染完毕后关闭 需要后置钩子

在permission中最后增加

router.afterEach((to,from)=>{
    hideLoading()
})