全局使用nprogress,也难免会有单个组件需要移除nprogress的需求
法一:暴力解决:
进入组件的钩子里(created或activated(如果你用了keepalive的话)),将nprogress的template设置为这样,拿掉它的样式渲染节点:
NProgress.configure({ template: '<div role="bar"><div></div></div>' })
然后在离开或销毁页面的钩子里再把节点模板还原回去:
NProgress.configure({ template: '<div class="bar" role="bar"><div class="peg"></div></div>' })
原理:
nprogress里这部分源码:(我修改了tamplate模板部分,去源码里可以看到该插件提供configure函数可修改这些配置项)
var Settings = NProgress.settings = {
minimum: 0.08,
easing: 'ease',
positionUsing: '',
speed: 200,
trickle: true,
trickleRate: 0.02,
trickleSpeed: 800,
showSpinner: true,
barSelector: '[role="bar"]',
spinnerSelector: '[role="spinner"]',
parent: 'body',
template: '<div class="bar" role="bar"><div class="peg"></div></div>'
// <div class="spinner" role="spinner"><div class="spinner-icon"></div></div>这个是右上角的旋转小圆圈,暂时不用
};
法二:
在路由守卫处进行相关配置。
之前忘记在哪里看的,可以这样移除和添加上nprogress
// 在request 拦截器中,展示进度条 NProgress.start()
const requestInterceptors = axios.interceptors.request.use(config => {
NProgress.start()
config.headers.token = window.sessionStorage.getItem('token')
// 这个必须return
return config
})
// 在response 拦截器中,隐藏进度条 NProgress.done()
const responseInterceptors = axios.interceptors.response.use(
response => {
NProgress.done()
console.log(response)
if (response.data.code === 401) {
router.push({
path: '/login',
query: { redirect: location.hostname }
})
}
return response
},