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

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