vue权限路由实现方式总结二 (3)

为了弄清楚page404.vue为什么又被打包了一次，我加了个simple.vue,而且在main.js也显式的import进去了，打包后发现simple.vue也是单独打包的，唯独page404.vue被打包了两次。暂时无解。。。

使用

route.component = () => import(`../${route.componentPath}.vue`)

处理路由，打包后

0开头的文件是page404.vue打包后的代码，1开头的是home.vue的，4开头是nouse.vue的，5开头是dynamic.vue的。

所有的组件都被单独打包了，而且home.vue打包后的代码还多了写东西：

webpackJsonp([1], { "rF/f": function(e, t) {}, sTBc: function(e, t, n) { var r = { "./App.vue": ["M93x"], "./pages/dynamic.vue": ["fJxZ", 5], "./pages/home.vue": ["vkyI"], "./pages/nouse.vue": ["HYpT", 4], "./pages/page404.vue": ["GVrJ", 0] }; function i(e) { var t = r[e]; return t ? Promise.all(t.slice(1).map(n.e)).then(function() { return n(t[0]) }) : Promise.reject(new Error("Cannot find module '" + e + "'.")) } i.keys = function() { return Object.keys(r) }, i.id = "sTBc", e.exports = i }, vkyI: function(e, t, n) { "use strict"; Object.defineProperty(t, "__esModule", { value: !0 }); var r = { name: "home", methods: { addRoutes: function() { this.$router.addRoutes([{ name: "dynamic", path: "/dynamic", component: function() { return n("sTBc")("./" + function() { return "pages/dynamic" } + ".vue") } }]), alert("路由添加成功!") } } }, i = { render: function() { var e = this.$createElement, t = this._self._c || e; return t("div", [t("div", [this._v("这是首页")]), this._v(" "), t("a", { attrs: { href: "javascript:void(0)" }, on: { click: this.addRoutes } }, [this._v("动态添加路由")]), this._v(" \n "), t("router-link", { attrs: { to: "/dynamic" } }, [this._v("前往动态路由")])], 1) }, staticRenderFns: [] }; var s = n("VU/8")(r, i, !1, function(e) { n("rF/f") }, "data-v-25e45483", null); t. default = s.exports } });

可以看到

var r = { "./App.vue": ["M93x"], "./pages/dynamic.vue": ["fJxZ", 5], "./pages/home.vue": ["vkyI"], "./pages/nouse.vue": ["HYpT", 4], "./pages/page404.vue": ["GVrJ", 0] };

跑里面去了，可能是因为是在home.vue里使用了route.component = () => import(../${route.componentPath}.vue)

低版本的vue-cli创建的项目，打包后的代码和前一种方式一样，并不是所有的组件都单独打包，不知道是webpack(webpack2出现这种情况)，还是vue-loader的问题

小结

使用routerMapComponents的方式处理路由，后端返回的路由数据上需要标识组件字段，使用此字段能匹配上前端维护的路由-组件列表(routerMapComponents.js)中的组件。使用此方式，只有维护进了路由-组件列表(routerMapComponents.js)中的组件才会被打包。

使用

route.component = function (resolve) { require([`../${route.componentPath}.vue`], resolve) }