vue中如何实现局部刷新效果

请求拦截器和响应拦截器

1.新增一个http.js文件，配置axios响应拦截器和请求拦截器。然后再导入Loading组件。并设置startLoading和endLoading两个函数，作用就是如函数名所示了。

 

import axios from 'axios'
import { Message, Loading } from 'element-ui'

let loading

function startLoading() {
    loading = Loading.service({
        lock: true,
        text: '为小主拼命加载中...',
        background: 'rgba(0,0,0,7)'
    })
}

function endLoading() {
    loading.close()
}

// 请求拦截
axios.interceptors.request.use(config => {
    startLoading()
    return config
}, error => {
    return Promise.reject(error)
})

// 响应拦截
axios.interceptors.response.use( response => {
    endLoading()
    return response
}, error => {
    endLoading()
    Message.error(error.response.data)
    return Promise.reject(error)
})


export default axios

 

main.js中引入http.js并绑定在vue上

impo