VUE+ElementUI 实现左侧菜单栏+Tab页访问本地页面和远程页面，非iFrame方式

前言：

后台管理系统经常会使用到一个左侧菜单栏，右侧Tab页的页面显示结构。
使用ElementUI中的Container 布局容器、NavMenu 导航菜单和Tabs 标签页配合Vue的Router路由能够方便的配置页面跳转的效果。在github上和CSDN上能够搜索到非常多的项目和实现教程。

但通常按照上述方案实现的效果只能添加本地服务上的vue页面，如果此时需要添加其他服务器上的页面，比如将“百度搜索”这个页面添加到菜单中，就显得力不从心。

很多时候，我们会第一时间想到使用iFrame框架，对页面布局进行分割和页面的跳转，但iFrame框架本身存在跨域问题和一些其他问题，现在已经不推荐此使用方式。

因此，本文在不使用iFrame内联框架的情况下，实现同时可以加载本地页面、远程页面的菜单导航效果。

一、实现效果

1.访问远程页面：

• 访问本地页面
  

二、实现方式

2.1 使用工具

• vue ：
  a. router路由管理 –>管理本地页面
  b. v-html 属性 –>负责加载远程页面
  c. keep-alive 标签 –>负责缓存页面信息
• ElementUI：
  a. Container 布局容器 –>负责页面布局
  b. NavMenu 导航菜单 –>负责显示左侧菜单栏
  c. Tabs 标签页 –>负责主要页面的显示

2.2 实现思路

1. 使用Container 布局容器设置好页面的布局：
   主要分为头部、主要部分（左侧菜单栏、右侧Tab页），做如下布局：
   
   Tab页的显示做特殊处理：使用type字段来判断加载本地router页面，还是远程v-html页面

<div v-if="item.type == 'remote'" v-html="item.content" style="