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="margin: 0;height:600px;width: 100%;"></div>
<div v-else style="height: 600px;width:100%;" >
	<keep-alive >
		<router-view></router-view>
	</keep-alive>
</div>

2. 使用NavMenu设置菜单栏，不使用 vue-router 的模式。为菜单栏添加数据，数据格式如下：

{
 	  index:'3',
      title:"百度搜索",
      path:'http://www.baidu.com',
      type:'remote'
  },
  {
      index:'4',
      title:"本地页面",
      component:'@/components/HelloWorld.vue',
      path:'/pages/helloWorld',
      type:'local'
  },

为菜单栏添加选中菜单栏的方法（@select=“handleSelected”），且实现Tabs标签的addTab方法，添加页面时主要以type字段来区分，当前加载的页面是本地或者远程。加载本地页面，采取编程式路由导航方式（$router.push），主要加载方式：

if(tabNode.type == "local"){
 	this.$router.push(tabNode.path)
}else if(tabNode.type == "remote"){
    content = ""
}
//别忘了修改当前激活的Tab页
this.$set(this.$my_editableTabsValue,"active-tab",tabNode.title)

3. 使用全局变量，配合Vue的数据对象响应式修改方式，激活当前选中Tab页、动态添加Tab页和删除tab页。我个人是直接在main.js中声明的变量，并添加在了vue的属性中，方便获取：

const my_tag_list = [];
const my_editableTabsValue = {"active-tab":''};

Vue.prototype.$my_tag_list = my_tag_list;
Vue.prototype.$my_editableTabsValue = my_editableTabsValue;

4. 路由方式跳转并没有缺少，因此还需要路由配置。新建router目录，在其下建index.js文件：

import Vue from "vue";
import VueRouter from "vue-router";

// 要告诉 vue 使用 vueRouter
Vue.use(VueRouter);
const routes = [
    {
        path:'/pages/helloWorld',
        component:() => import(/* webpackChunkName: "home" */ '@/components/HelloWorld.vue'),
    }
]

var router =  new VueRouter({
    routes
})
export default router;

routers中的path：只代表浏览器地址栏中的地址变化，不是真实的文件路径，真实的文件是由component载入的。
注：如果可以使用动态添加路由信息的方式，那么可以在添加Tab的方法内直接使用菜单栏的数据配置信息即可，此处就不需要在index.js文件中给routers数组赋值了，当然，作为小白，此方式能否成功，还暂未尝试。

项目地址：https://github.com/zhangjiangmse/back_menu.git
项目中集成了国际化。