vue-router 路由懒加载

Question

import Vue from 'vue'
import Router from 'vue-router'

const Daily = () => import('../components/Daily.vue')
const Cosplay = () => import('../components/Cosplay.vue')
const Draw = () => import('../components/Draw.vue')

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/daily',
      name: 'daily',
      component: Daily
    },
    {
      path: '/cos',
      name: 'cos',
      component: Cosplay
    },
    {
      path: '/sifu',
      name: 'sifu',
      component: Cosplay
    },
    {
      path: '/draw',
      name: 'draw',
      component: Draw
    },
    {
      path: '/',
      redirect: '/cos'
    }
  ]
})

按照 vue-router 官方文档中的做法配置了路由懒加载，但是运行时却报错：

Vue warn: Failed to mount component: template or render function not defined.

想问问大家是怎么配置路由懒加载的。

Answer 1

找到问题了，在 vue-router 2.x 中，要这么写：

const foo= () => import('../components/foo.vue').then(m => m.default)

vue-router 3.x 中，可以这么写：

const foo= () => import('../components/foo.vue')

Answer 2

路由配置没有问题，看错的应该是你vue文件书写错误或者是es转码错误，多半是前者

Answer 3

.babelrc

{

"plugins": ["syntax-dynamic-import"]

}

Answer 4

那你之前写的不就对吗