下面是使用Vue官方路由器实现懒加载的代码:
src/router/index.js
import Vue from "vue";
import VueRouter from "vue-router";
const Foo = () => import("@/components/Test2");
const Bar = () => import("@/components/Test");
Vue.use(VueRouter);
export default new VueRouter({
mode: "history",
routes: [
{
path: "/test",
name: "test",
component: Bar
},
{
path: "/test2",
name: "test2",
component: Foo
}
]
});
src/main.js
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
Vue.config.productionTip = false;
new Vue({
render: h => h(App),
router
}).$mount("#app");
路由的功能符合预期,但是懒加载没有正常工作,在第一次加载时,我检查了网络选项卡,发现能够看到由webpack生成的延迟加载文件。