nprogress单个组件内移除

全局使用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
    },