Agregar barra de progreso de solicitud global (nprogress) para React y Vue
Primero, debe instalar el complemento:
npm i nprogress -S
p>Luego hay dos formas principales de usarlo, la primera es cambiar de página y la segunda es solicitar la interfaz.
Agregue el siguiente código al archivo de entrada para cambiar de página:
import NProgress from 'nprogress' //Introduzca el complemento nprogress
import 'nprogress /nprogress .css' // Se debe introducir el complemento nprogress
router.beforeEach((to, from, next) => {
NProgress.start()
siguiente ()
})
router.afterEach(() => {
NProgress.done()
})
Las solicitudes de interfaz se procesan en el interceptor axios, directamente en el código:
// interceptor de solicitudes axios
axios.interceptors.request. use(
config => {
NProgress.start() // Establece la barra de progreso de carga (inicio...)
return config
},
error => {
return Promise.reject(error)
}.reject(error)
}
)
// interceptor de respuesta de axios
axios.interceptor.response.use(
función(respuesta) {
NProgress.done() // Establece la barra de progreso de carga (final...)
devolver respuesta
},
función ( error) {
return Promise.reject(error)
}
}
)
De Por supuesto, también puedes diseñar la barra de progreso
#nprogress .bar {
background: red !important //color personalizado
}
. . . . . . . . . . . . .
Autor: MonkeySoft
Para obtener más información, consulte el enlace de la extensión: /tutorial/50674.html.