vue3 后台管理 nprogress进度条使用

1安装插件

npm install nprogress
or
yarn add nprogress
or
pnpm add nprogress

2 新建文件

// 引入进度条插件
import NProgress from 'nprogress'
// 引入对应css样式
import 'nprogress/nprogress.css'
// 修改进度条插件的配置
NProgress.configure({
  showSpinner: false
})
import router from '../router/index'

import {
  appSource
} from '../utils/app'
// 前置首位 访问权限控制
router.beforeEach((to) => {
  // 开启页面进度条
  NProgress.start()
  const wihteList = ['/login']
  // 没有token 并且 不再白名单 则跳转登录页

})
// 后置守卫
router.afterEach((to, form) => {
  // 设置页面标题
  document.title = appSource.title + '-' + to.meta.title || '工时平台!'
  NProgress.done()
})

核心

总结:就是路由加载

在router.beforeEach中加NProgress.start()

在router.afterEach中加NProgress.end()

3 在main.js引入

放在路由下面

import router from './router'
import './permission/index.js'