import xxx from 和 import {xxx} from的區別

1.以vue-router導航守衛的使用爲例：

//main.js
import Vue from 'vue'
import './plugins/axios'
import App from './App.vue'
// import router from './router'
import { router } from './router'
import qs from 'qs'
import './plugins/element.js'

Vue.config.productionTip = false

axios.defaults.baseURL = 'http://localhost:8080/api';
// axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
// axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

Vue.prototype.qs = qs

router.beforeEach((to, from, next) => {
  /* 路由發生變化修改頁面meta */
  if (to.meta.content) {
    let head = document.getElementsByTagName('head');
    let meta = document.createElement('meta');
    meta.content = to.meta.content;
    head[0].appendChild(meta)
  }
  /* 路由發生變化修改頁面title */
  if (to.meta.title) {
    document.title = to.meta.title;
  }
  next()
})

new Vue({
  router,
  render: function (h) { return h(App) }
}).$mount('#app')

2.console報錯：

Uncaught TypeError: Cannot read property 'beforeEach' of undefined

3.解決方式：

router.js使用export default時，main.js使用import xxx from
router.js使用export 時，main.js使用import {xxx} from

4.參考

ES6 export && export default 差異總結-https://juejin.im/post/5abe3e...