Vue Router 学习 异步路由

routes.js 非异步

``` import Todo from '../views/todo.vue' import Login from '../views/login.vue'

export default [ { path: '/', redirect: '/todo' }, { path: '/todo/:id', props: true, component: Todo }, { path: '/login', component: Login } ] ```

routes.js 异步

``` // import Todo from '../views/todo.vue' // import Login from '../views/login.vue'

export default [ { path: '/', redirect: '/todo' }, { path: '/todo/:id', props: true, component: () => import('../views/todo.vue') }, { path: '/login', component: () => import('../views/login.vue') } ] ```

使用异步语法报错

Failed to compile. ./src/router/routes.js Module build failed: SyntaxError: /Users/xxx/Desktop/Project/web/test/vue-router/src/router/routes.js: Unexpected token (14:21) component: () => import('../views/login.vue') 如果使用异步加载路由的语法之后报错，那么需要安装一下

syntax-dynamic-import // @babel/plugin-syntax-dynamic-import

安装方式请自行百度，解决答案很多。