vue3中使用NProgress的用法

vue3中使用NProgress的用法

自我记录

跳转页面的时候顶部的进度条实现方式 下面是github地址
https://github.com/rstacruz/nprogress
主要记住两个api就可以简单的使用
开启 NProgress.start()
关闭 NProgress.end()

1.首先安装
Ps:npm 5.0.0 之前，有 --save 参数才会把模块写入到 packages.json。现在已经是内置参数，不用额外写了

npm install nprogress
or
yarn add nprogress
or
pnpm add nprogress

2.使用了ts的小伙伴记得安装ts类型 (项目没有ts的可以跳过)

pnpm add @types/nprogress -D

3.引入并使用 src/router/index.ts

import { createRouter, createWebHistory } from 'vue-router'
// 引入进度条插件
import NProgress from 'nprogress'
// 引入对应css样式
import 'nprogress/nprogress.css' 

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: []
  })
 // 修改进度条插件的配置
+ NProgress.configure({
+   showSpinner: false
+ })
// 前置首位 访问权限控制
router.beforeEach((to) => {
  // 开启页面进度条
+  NProgress.start()
  // 用户仓库
  const store = useUserStore()
  // 用户白名单
  const wihteList = ['/login']
  // 没有token 并且 不再白名单 则跳转登录页
  if (!store.user?.token && !wihteList.includes(to.path)) return '/login'
  // 放行 return true  可以不用写
})
// 后置守卫
router.afterEach((to) => {
  // 设置页面标题
  document.title = to.meta.title || '奔跑的代码!'
+  NProgress.done()
})

总结:就是路由加载的router.beforeEach中加NProgress.start()
在router.afterEach中加NProgress.end()

4.修改进度条颜色 src/styles/main.scss 全局样式文件

#nprogress .bar {
  background: pink !important;    //这里自定义颜色
}

展示效果

包管理工具额外说明: