Tab点击过快导致视图数据错乱

在tab切换的时候如果重新请求数据，这时tab切换很快，而第一次请求返回较慢，这时候可能会出现第一个tab的数据跑到了第二个tab的现象。
针对这种情况，可以在第二次请求的时候把第一次的取消掉。你如果使用axios做为请求库，则在全局axios请求拦截中添加cancelToken和拦截错误:

const service = axios.create()

service.interceptors.request.use(
  config => {
    config.cancelToken = new axios.CancelToken(cancel => {
      // 存入一个cancel token
      store.commit('addCancelToken', cancel)
    })
  },
  error => {...}
)

service.interceptors.response.use(
  response => {...},
  error => {
    // 拦截axios错误
    if (error instanceof axios.Cancel) return
    ...
  }
)

每次路由切换前先取消之前的请求:

router.beforeEach((to, from, next) => {
  cancelTokenList.forEach((cancel ,index) => {
    cancel()
    deleteCancelToken(index)
  })
})

用cancelTokenList（或者全局变量）保存所有cancelToken:

// store
state: {
  cancelTokenList: []
},
mutations: {
  addCancelToken(state, payload) {
    state.cancelTokenList.push(payload)
  },
  deleteCancelToken(state, payload) {
    state.cancelTokenList.splice(payload, 1)
  }
}