1、npm安装nprogress
在npm首页搜索nprogress并进行安装
npm i nprogress
2、main.js引入css样式
安装后,在node_modules中可以找到nprogress,在main.js中引入对应的css文件
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
import 'nprogress/nprogress.css'
app.mount('#app')
3、封装显示和隐藏loading方法
由于是全局loading,每个页面在加载中和加载完成时都得使用nprogress,因此可以封装一个js
import nprogress from "nprogress";
//显示全屏loading
export function showFullLoading(){
nprogress.start()
}
//隐藏全屏loading
export function hideFullLoading(){
nprogress.done()
}
4、全局前置守卫和全局后置守卫调用loading方法
由于每个页面在加载中时都得显示loading,因此可以在全局前置守卫中调用显示loading方法
由于每个页面在加载完毕后都得隐藏loading,因此可以在全局后置守卫中调用隐藏loading方法
import {router} from '~/router'
import { showFullLoading, hideFullLoading } from "~/composables/util";
router.beforeEach((to, from, next) => {
showFullLoading()
})
router.afterEach((to, from) => {
hideFullLoading()
})
5、自定义全局loading进度条样式
在完成上述步骤以后,可以运行项目,F12来查看进度条的样式是哪一个,然后在app.vue中自己修改想要的样式,例如#nprogress .bar就是对应的进度条样式,可以修改颜色、高度等,注意修改的时候后面得要加!important
<style>
#nprogress .bar{
background-color: #f4f4f4!important;
height: 3px!important;
}
</style>
6、最终实现效果
该效果是截取vueuse中的nprogress ,具体的可以自己动手试一试