Vue路由器延迟加载路由不起作用答案

【问题标题】：Vue router lazy loading routes not workingVue路由器延迟加载路由不起作用
【发布时间】：2020-06-20 05:50:50
【问题描述】：

我使用了 Vue CLI 并构建了一个水疗中心。

在router.js我试试：

export default new Router({
  mode: 'history',
  routes: [
    { path: "",
      name: "home", 
      component: Home
    },
    { 
      path: "/about",
      name: "about",
      component: () => {
       import ("./views/About")
    } 
    },
    { 
      path: "/contact",
      name: "contact",
      component: () => {
       import ("./views/Contact")
      } 
    }
  ]
})

但是我的路由器链接和路由不再起作用了？

从这里我read，我必须安装syntax-dynamic-import？但是如何添加该插件webpack.config.js？我怎样才能做到这一点？

【问题讨论】：

标签： vuejs2 vue-router

【解决方案1】：

尝试从函数返回导入：

export default new Router({
  mode: 'history',
  routes: [
    { path: "",
      name: "home", 
      component: () => import("./views/Home")
    },
    { 
      path: "/about",
      name: "about",
      component: () => import("./views/About") 
    },
    { 
      path: "/contact",
      name: "contact",
      component: () => import("./views/Contact")
    }
  ]
})

【讨论】：