vue代碼中的axios自定義攔截器，只要一導(dǎo)入自定義的router，組件就不加載但也沒有報錯

├── api
│?? └── api.js //在這個文件導(dǎo)入router/index.js文件就會造成LocationList.vue這個組件不加載
├── App.vue
├── components
│?? ├── Footer.vue
│?? ├── Header.vue
│?? ├── LocationList.vue //　這里調(diào)用了api.js的方法
│?? ├── Location.vue
│?? └── pipeline.vue
├── router
│?? └── index.js //感覺是不是這里出了問題，但是又沒有報錯，也找不到原因是什么

# api/api.js
import axios from 'axios'
import store from '../store/store'

// import router from '../router'    <- 這里注釋去掉之后就會出現(xiàn)問題

axios.interceptors.request.use(
  config => {
    if (store.state.userInfo.token) {
      config.headers.Authorization = `JWT ${store.state.userInfo.token}`
      console.log('request.interceptors token: ' + store.state.userInfo.token)
    }
    return config
  },
  err => {
    return Promise.reject(err)
  })

axios.interceptors.response.use(
  response => {
    console.log('api/api.js, response: ' + response)
    return response
  },
  error => {
    let res = error.response
    console.log(res)
    switch (res.status) {
      case 401:
        console.log(res)
        // console.log(router.currentRoute)　　<- 這里注釋去掉之后就會出現(xiàn)問題
    }
    return Promise.reject(error.response.data)
  })

let host = 'http://127.0.0.1:8000/api'

export const apiFetchLocations = () => { return axios.get(`${host}/location/`) }

export const deployPipeline = params => { return axios.post(`${host}/pipeline/`, params) }

export const apiLogin = params => { return axios.post(`${host}/login/`, params) }

# router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'

import login from '../components/login/login'
import LocationList from '../components/LocationList'
import pipeline from '../components/pipeline'

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    {
      path: '/',
      name: 'index',
      component: LocationList,
      meta: {
        requireAuth: true
      }
    },
    {
      path: '/login',
      name: 'login',
      component: login,
      meta: {
        requireAuth: true
      }
    },
    {
      path: '/pipeline',
      name: 'pipeline',
      component: pipeline,
      meta: {
        requireAuth: true
      }
    }
  ]
})

export default router

# components/LocationList.vue
<template>
...
</template>

<script>
  import ClipLoader from 'vue-spinner/src/ClipLoader.vue'

  import Location from './Location.vue'
  import { apiFetchLocations } from '../api/api'  //這里是一次調(diào)用，應(yīng)該是api.js報錯造成了這個組件沒有加載

  export default {
    data () {
      return {
        loading: true,
        locations: [],
        spincolor: '#007bff',
        size: '45px'
      }
    },
    components: { ClipLoader, Location },
    created () {
      this.fetchLocations()
    },
    methods: {
      fetchLocations () {
        this.loading = true
        apiFetchLocations().then((response) => {
          console.log('Locationlist.vue:' + response)
          this.locations = response.data.results
          this.loading = false
        }).catch(function (error) {
          console.log(error)
        })
      },
      deployAll () {
        var locations = this.$children
        console.log(this.$children)
        // TODO This is hacker way to trigger children's action
        for (var i = 1; i < locations.length; i++) {
          locations[i].deploy()
        }
      }
    }
  }
</script>