spa项目开发之tab页实现及Echart图表

添加tab页

目标

1、利用前面博客所讲的Vuex的知识；定义几个变量

Options：存放tab页对象的容器（主要是路由路径以及tab页的名字）

activeIndex：被激活的tab页路由路径

showName：tab页的标题

Role：用来区分是否是因为左侧菜单被点击造成的路由路径发生改变；
是：pass；不是：nopass

2、左侧导航菜单绑定点击事件

将被点击的菜单名称存放到Vuex中，供路由路径变化监听时，tab页标题显示；

标记一下role为pass，到时新增tab页的时候需要作为判断依据

3、右侧对tab页进行操作

Tab页的点击（切换到被点击的tab页完成路由跳转；标记一下role为nopass，到时新增tab页的时候需要作为判断依据；）；

Tab页的移除（删除指定的tab页对象；如果删除的tab页对象处于选中状态，需要将选中状态的下标移到最后一个，因为原来选中的tab页已经删除了；标记一下role为nopass，到时新增tab页的时候需要作为判断依据；））

4、监听路由路径变化

点亮已经存在的tab页（Vuex中showName与option中的哪个tab页对象的name相同，那么就点亮哪一个）

新增tab页（首先路由路径的变化是因为左侧栏的点击，其次要option中不存在的tab页对象）

相关代码
State.js

export default{
	resturantName:'小厨娘',
	options:[],//存放tab页路由的路径
	activeIndex:'',//激活的tab页路由路径
	showName:'show',//tab页的标题
	role:''//用来区分是否是因为左侧菜单被点击造成的路由路径发生改变，是：pass, 不是nopass
}

Mutations.js

export default { //payload 载荷 保存参数的容器
	setResturantName: (state, payload) => {
		state.resturantName = payload.resturantName;
	},

	//添加tabs（data包含了路由路径跟tab页名字）
	add_tabs(state, data) {
		this.state.options.push(data);
	},
	//删除tabs，route是路由的路径
	delete_tabs(state, route) {
		let index = 0;
		for (let option of state.options) {
			if (option.route === route) { //去重复
				break;
			}
			index++;
		}
		this.state.options.splice(index, 1); //删除options里面下标为Index的一个数
	},
	//设置当前激活的tab
	set_active_index(state, index) {
		this.state.activeIndex = index;
	},
	//设置tab显示的标题
	set_showName(state, name) {
		this.state.showName = name;
	},
	set_role(state, role) {
		this.state.role = role;
	}
}

Getters.js

export default {
	getResturantName: (state) => {
		return state.resturantName;
	},
	getShowName: (state) => {
		return state.showName;
	},
	getOptions: (state) => {
		return state.options;
	},
	getRole: (state) => {
		return state.role;
	}
}

LeftNav.vue

注意

<el-menu-item :key="‘id_’+m2.treeNodeId" :index=“m2.url” @click=“showName(m2.treeNodeName)” v-for=“m2 in m.children”>

{ {m2.treeNodeName}}

添加点击事件@click="showName(m2.treeNodeName)"

<template>
	<el-menu router :default-active="$route.path" default-active="2" class="el-menu-vertical-demo" background-color="#334157"
	 text-color="#fff" active-text-color="#ffd04b" :collapse="collapsed">
		<div class="logobox">
			<img class="logoimg" src="../assets/img/logo.png" alt="">
		</div>
		<el-submenu :key="'myid_'+m.treeNodeId" :index="'myid_'+m.treeNodeName" v-for="m in mymenus">
			<template slot="title">
				<i :class="m.icon"></i>
				<span>{
  {m.treeNodeName}}</span>
			</template>
			<el-menu-item :key=&