引用MiniUI导航框架

一、文章背景：

以导航框架在线示例1为例

点击导航框架1，页面跳转至

只有效果，没有看到示例代码，即使查看网页源代码，看到的也只是

这绝对不是全部代码！！！

二、还原完整代码流程

1、找到图中引用的所有文件

2、依据上图文件的相对路径，在下图中找到所有文件

大多数文件都可以 在文件名处，右键→另存为，直接存至想放的地方，但 fontawesome-webfont.woff?v=4.7.0 没有另存为选项，可以 复制链接地址，打开一个新的网页，在地址栏输入复制的链接地址，就可以直接把文件下载下来。

3、修改boot.js 引用的文件路径

原因：boot.js 文件中引用了一系列文件，以我的所有引用文件存放为例，可以看到我们存放的路径不可能与源代码完全一致，因此需要将引用的文件路径修改为我们在项目中存放的路径

原则：改为相对于boot.js的相对路径；返回上级则 ../，同级则直接 文件名

示例：

4、font-awesome.min.css 中也有文件引用，同3一样的修改原则

我是直接将上述两行修改为了

src: url('fontawesome-webfont.woff?v=4.7.0') format('woff');

5、菜单数据格式

在线示例是如下图获取的菜单文件，但在左侧的资源中，并没有找到这个文件

我们可以在 网络 中，找到这个文件的内容

三、基于 在线示例---导航框架1 内容区域的修改

示例中是用Tabs展示菜单对应的内容

我用了 iframe，要注意的是菜单json文件中url值是页面路由，而不是文件地址

最终效果