vue路由组件的写法踩坑

今天自己动手搭了个新的vue框架，准备做一个小项目。
一切准备就绪，当我写完登录的路由组件，测试的时候一直有报错。

检查了好久没有发现到底错误在哪里，引用的地址都是正确地址。
最后重新看了一下vue路由组件的几种写法，终于发现了到底哪里不对劲

相信些小伙伴已经看出来错误在哪里了，下图是我以前的一个项目里的路由组件部分代码

两者一对比，就发现了，最终代码修改完毕。

// 错误代码
 const Login = import('./components/Login.vue')
// 正确代码
const Login = () => import(/*webpackChunkName:"Login"*/ './components/Login.vue')

解决完这个问题后，我简单整理了一下vue路由组件的常见写法。

组件注册的几种写法：
//第一种方法需要先引用文件
import Login from './components/Login.vue'

Vue.use(Router)
export default new Router({
  routes: [
	//第一种方法需要先引用文件
  	{ path: '/login', name: 'login', component: Login },
  	{ path: '/login', name: 'login', component: () => import('@/components/login.vue') },
	{ path: '/login', name: 'login', component: require('@/components/login.vue').default },
	{ path: '/login', name: 'login', components: require('@/components/login.vue') }
  ]
})
,

需要注意的是两种 require 方式的区别，有个加了 .defaut 而有个没加，没加的那行 component 后面加了 s ，如果不加 s 会报错：
Vue Failed to mount component：template or render function not defined

vue组件注册为什么有时候要在require后面加上default？

笔者查了一下资料：

webpack 打包时支持 CommonJS、AMD 和 ES6 的模块化系统。

通常写 .vue 单文件组件时，在 script 语言块中使用的是 ES6 的语法，使用 export default 进行默认导出。

require 是 CommonJS和 AMD的模块导入方式，不支持模块的默认导出，因此导入的结果其实是一个含 default 属性的对象，因此需要使用 .default 来获取实际的组件选项。

或者使用 ES6 的 import 语句，ES6 的模块化导入导出语法参见 http://es6-features.org/#ValueExportImport，import 时需要给定一个变量名，所有 import 语句必须统一放在模块的开头。

如果 .vue 文件中使用的本来就是 CommonJS 或者 AMD 的模块化系统语法，导出的是 module.exports 对象作为组件选项，那么使用 require 导入时就不需要使用 .default 来获取。