Vue实现头部nprogress动画

如何实现头部nprogress动画

1：安装NProgress组件

npm install nprogress
yarn add nprogress
pnpm install nprogress

2：使用nprogress

import NProgress from 'nprogress'
// 显示右上角螺旋加载提示
NProgress.configure({ showSpinner: true })
//开启进度条
NProgress.start()
//完成进度条
NProgress.done()

3： 结合业务

登录的时候使用：

login.vue

import NProgress from 'nprogress'
// 显示右上角螺旋加载提示
NProgress.configure({ showSpinner: true })
// 提交表单
const  handleSubmit = async () => {
    // axios.post ---application/json---gin-request.body
    if(!loginUser.code){
        alert("请输入验证码")
        return;
    }
    if(!loginUser.account){
        alert("请输入账号")
        return;
    }
    if(!loginUser.password){
        alert("请输入密码")
        return;
    }
​
    //开启进度条
    NProgress.start()
    // 把数据放入到状态管理中
    const resp = await userStore.toLogin(loginUser)
    if (resp.data.code === 20000) {
        router.push("/")
        //完成进度条
        NProgress.done()
    } else {
        //完成进度条
        NProgress.done()
        if (resp.data.code === 60002) {
            alert(e.data.msg);
            loginUser.code = "";
            handleGetCapatcha();//重新激活生成新的验证码
        }
    }
}

4.加载路由登录的场景

import { createRouter, createWebHistory } from 'vue-router'
import NProgress from 'nprogress'
// 获取状态管理的token
import { useUserStore } from '@/stores/user.js'
// 显示右上角螺旋加载提示
NProgress.configure({ showSpinner: true })
​
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'index',
      meta: { title: "index" },
      component: () => import('@/views/index.vue')
    },
    {
      path: '/login',
      name: 'login',
      meta: { title: "login" },
      component: () => import('@/views/login.vue')
    },
    {
      path:'/:pathMatch(.*)*',
      name:'NotFound',
      component: () => import('@/views/NotFound.vue')
    }
  ]
})
​
​
router.beforeEach((to, from, next) => {
  //开启进度条
  NProgress.start()
  next()
})
​
router.afterEach(() => {
  //完成进度条
  NProgress.done()
})
​
​
export default router
​