pnpm install --save nprogress
import NProgress from 'nprogress';
import 'nprogress/nprogress.css';
NProgress.configure({
easing: 'ease',
speed: 1000,
showSpinner: false,
trickleSpeed: 200,
minimum: 0.3
})
export const start = ()=>{
NProgress.start()
}
export const close = ()=>{
NProgress.done()
}
import userUserStore from '@/store/modules/useUserStore';
import { ElNotification, ElMessage } from 'element-plus';
import { start, close } from '@/utils/nprogress';
const idUser = storeToRefs(userUserStore()).id;
router.beforeEach((to, from, next) => {
start();
if (to.meta.title) {
document.title = String(to.meta.title);
} else {
document.title = '滑坡监测平台';
}
if (to.matched.length === 0 && !to.name) {
ElNotification({
title: 'Error',
message: 'This is an error message',
type: 'error',
duration: 5000,
});
ElMessage.error('404');
router.push('/404');
} else if (to.path !== '/login' && to.path !== '/404') {
if (idUser.value === -1) {
console.log('未登录');
ElNotification({
title: '未登录状态',
message: '您当前未登录,请登录后再访问!',
type: 'error',
duration: 5000,
});
ElMessage.error('您当前未登录,请登录后再访问!');
router.push('/login');
}
}
next();
});
router.afterEach(() => {
close();
});
import { ElMessage } from 'element-plus';
import axios from 'axios';
import { IUser, KEY_USER_ID } from '@/store/modules/useUserStore';
import router from '@/router';
import { start, close } from '@/utils/nprogress';
const service = axios.create({
baseURL: 'http://127.0.0.1:8000/api/v1',
timeout: 5 * 1000,
});
service.interceptors.request.use(
(config) => {
start();
return config;
},
(error) => {
return Promise.reject(error);
}
);
service.interceptors.response.use(
(response) => {
close();
return response;
},
(error) => {
return Promise.reject(error);
}
);
export default service;
- 更改进度条的颜色、宽度,位置
index.html
中的style
标签中
<style>
#nprogress .bar {
background-color: #FFFFFF !important;
background-image: linear-gradient(0deg, #FFFFFF 0%, #6284FF 50%, #FF0000 100%) !important;
height: 6px !important;
}
</style>