vue实现单页面多标签页

实现上面的效果，主要是通过改变vue的路由机制实现的

1. 在router目录文件下新建TabRouter.js文件，添加以下内容

const route = Object.create(null)
route.install = function (vue) {
  // 第一个字符串是 组件名，第二个是组件路径，第三个是包名(如果不指定则已1.js,2.js....n.js命名)
	vue.component('home', (resolve) => {require.ensure([], ()=>resolve(require('@/Views/index/adminIndex.vue')), 'home')})
	vue.component('userscreate', (resolve) => {require.ensure([], ()=>resolve(require('@/Views/demo/Sitecreate.vue')), 'userscreate')})
	vue.component('userslist', (resolve) => {require.ensure([], ()=>resolve(require('@/Views/demo/Sitelists.vue')), 'userslist')})
}


export default route

2. 在router目录文件下新建MainConf.js文件，添加如下内容

export default {
	// 列表配置
	// 菜单列表
	menu: [
		{
			title: '主菜单1',            // 一级菜单名称
			icon: 'el-icon-location',   // 一级菜单 icon
			menuId: '1',                // 索引(必须唯一，是字符串)
			sub: [                      // 子菜单(二级菜单)
				{
					title: '站点列表',      // 菜单名称
					component: 'userslist',    // 点击菜单打开的组件名称
					menuId: '1-1'           // 索引 (用于识别当前打开的tab,必须唯一，是字符串)
				},
				{title: '新增站点', component: 'userscreate', menuId: '1-2'}
			]
		}
	],

	// 主页 tab 配置
	homeTab: {
		title: '首页',                     //  tab 显示标题
		menuId: 'home',                   //  tab 内部名称(用来识别当前打开的tab)
		components: [{path: 'home'}],     //  tab 对应的组件
	}
}

3. 引入store文件

import Vue from 'vue'
import Vuex from  'vuex'
import MainStore from '@/router/MainStore'
Vue.use(Vuex)

export default new Vuex.Store({
  //  模块化 store, 把需要 store 的数据导入到这里即可
  // store 格式参考 /src/Frame/MainStore.js
  modules: {
    MainStore,
  }
})

4.在MainStore中追加一下tab标签实现方法

import store from "@/Store";
import conf from './MainConf'
import {Base64} from 'js-base64'

export default {
	state: {
		/*