非SSR下的VUE持久化路由动态加载（一）

一，路由的基本使用：

    我们在使用vue-router的时候，基本情况会有如下配置

然后通过webpack进行编译，生成js文件（vue-router的具体使用请参考官网，不是本主题的重点）

现在路由信息是在js文件中，那么如果我们想把路由信息存储到数据库，该如何做呢。

---

二，要想实现，首先得搞清楚webpack是如何编译，以及编译后是如何运行的。

本主题分多个部分，本章主要阐述webpack相关的内容。

webpack中，我们经常使用CommonsChunkPlugin来提取公共脚本，需要注意的有两部分：

连个方法，通过代码，我们能看到：

1，__webpack_require__.e ：负责加载分割后的js文件

2，__webpack_require__ : 执行js文件中的方法

而webpack编译后，有chunck和module两个概念，和上述两个方法对应，module是一个键值对，key是数字，value是要eval的代码

---

三，那么路由和两者的关系是什么呢？

我们再回头看我们的路由定义：

const IndexPage = r => require.ensure([], () => r(require('./src/vue/frame/Index.vue')), 'Index')

经过webpack编译如下：

var IndexPage = function IndexPage(r) { 

return __webpack_require__.e/* nsure */('3', function () {\n return r(__webpack_require__(\"12\"));\n });\n};

通过编译后的代码可以看到，首先加载3.js,然后去执行模块名称为"12"的js方法。

---

四，目前为止，非SSR下的VUE持久化路由动态加载，思路就清晰了，有如下问题：

1，module的key必须是固定值，不能随文件多少而变化，也就是持久化

2，路由对应的module，由开发编译改为运行加载，即：

    从数据库中获取数据，然后运行时组装成webpack编译后的样子。

具体实现，请看下一篇文章：非SSR下的VUE持久化路由动态加载（二）