.

package.json

@@ -13,7 +13,8 @@
     "sass-loader": "^13.2.0",
     "vue": "^2.6.14",
     "vue-router": "^3.2.0",
-    "vuex": "^4.1.0"
+    "vuex": "^3.6.2",
+    "vuex-persistedstate": "^4.1.0"
   },
   "devDependencies": {
     "@babel/core": "^7.12.16",

src/components/tabs.vue

@@ -1,9 +1,14 @@
 <template>
 	<div>
-		<el-tabs editable type="card" :value="$route.path" @edit="handleTabsEdit" @tab-click="tabclick">
-			<el-tab-pane v-model="editableTabsValue" :key="item.name" v-for="(item, index) in $router.options.routes[1].children"
-				:label="item.meta.title" :name="item.path" @tab-remove="ssss">
-			</el-tab-pane>
+		<el-tabs type="card" closable :value="$route.path" @tab-click="tabClick" @tab-remove='tabClose'>
+		  <el-tab-pane
+		    v-for="(item, index) in TabsData"
+		    :key="item.path"
+		    :label="item.title"
+		    :name="item.path"
+		  >
+		    {{item.content}}
+		  </el-tab-pane>
 		</el-tabs>
 	</div>
 </template>
@@ -12,32 +17,37 @@
 	export default {
 		data() {
 			return {
+				homes:'danger',
 				editableTabsValue: '',
-				TabsData: []
+				TabsData: this.$store.state.tabList
 			}
 		},
-		
-		methods:{
-			tabclick(e){
-				this.$router.push(e.$options.propsData.name) 
-			},
-			handleTabsEdit(e){
-				console.log(e)
-			},
-			ssss(e){
-				this.$router.push(e) 
-				console.log(e)
+		watch: {
+			'$route': {
+				handler(to){
+					console.log('哇哇哇哇',to)
+				},
+				immediate:true
 			}
 		},
-		mounted() {
-			console.log('0')
+		methods: {
+			tabClick(e) {
+				if(e.name!=this.$route.path){
+					this.$router.push(e.name)
+				}
+			},
+			tabClose(e) {
+				// this.$router.push(e.name)
+				console.log('tabClick',this.editableTabsValue)
+				this.$store.commit('delTab',e)
+			},
 		},
-		destroyed(){
-			console.log('1')
-		}
-			
+
 	}
 </script>
 
 <style>
+	.el-tabs__nav .el-tabs__item:nth-child(1) span{
+	     display: none;
+	 }
 </style>

src/router/index.js

@@ -1,11 +1,12 @@
 import Vue from "vue";
 import VueRouter from "vue-router";
+import store from '@/store'
 Vue.use(VueRouter);
 
 const routes = [
 	{
 		path:'/',
-		name:'Login',
+		name:'login',
 		meta: {
 			title: '冷链验证报告管理系统线上版本',
 		},
@@ -49,4 +50,16 @@ const router = new VueRouter({
 	routes,
 });
 
+//登录拦截//未登录返回到登录界面
+router.beforeEach((to, from, next) => {
+	if(to.name!=-1 && to.name!='login'){
+		store.commit('addTab',{
+			title:to.meta.title,
+			path:to.path,
+			name:to.name
+		})
+	}
+	next()
+})
+
 export default router;

src/store/index.js

@@ -1,17 +1,39 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
-
+import router from 'vue-router'
+import createPersistedState from 'vuex-persistedstate'
 Vue.use(Vuex)
 
 export default new Vuex.Store({
+	plugins: [
+		createPersistedState({
+			key: 'stort',
+			paths: [] //, 'Tags'
+		})
+	],
 	state: {
-		tabList: ['1','2','3','4']
+		tabList: [{
+			title:'工作首页',
+			path:'/home',
+			name:'home'
+		}],
+		includeTabs:[]
 	},
 	mutations: {
-		// addTab: (state, tab) => {
-		// 	if (state.tabList.some(item => item.path === tab.path)) return
-		// 	state.tabList.push(tab)
-		// }
+		addTab: (state, tab) => {
+			var tabVal = state.tabList.some(item => item.path === tab.path)
+			if(tabVal===false){
+				state.tabList.push(tab)
+				state.includeTabs.push(tab.name)
+			}
+		},
+		delTab: (state, tab) => {
+			state.tabList.forEach(function(item,index) {
+				if(item.path === tab){
+					state.tabList.splice(index,1)
+				}
+			})
+		}
 	},
 	getters: {
 		// 获取tbsList

src/views/layout/index/index.vue

@@ -2,7 +2,8 @@
 	<div class="">
 		<el-container>
 			<el-aside width="180px">
-				<el-menu @select='select' :default-active="$route.path" router class="el-menu-vertical-demo" background-color="#545c64" text-color="#fff">
+				<el-menu :default-active="$route.path" router class="el-menu-vertical-demo" background-color="#545c64"
+					text-color="#fff">
 					<el-menu-item :index="item.path" v-for="(item,index) in $router.options.routes[1].children"
 						:key="index">
 						<i class="el-icon-setting"></i>
@@ -10,16 +11,16 @@
 					</el-menu-item>
 				</el-menu>
 			</el-aside>
-			<el-main>
-				<el-header>
+			<div style="flex: 1;">
+				<div style="">
 					<tabs></tabs>
-				</el-header>
+				</div>
 				<el-main>
 					<keep-alive :include="includeTabs">
 						<router-view></router-view>
 					</keep-alive>
 				</el-main>
-			</el-main>
+			</div>
 		</el-container>
 	</div>
 </template>
@@ -27,34 +28,18 @@
 <script>
 	import tabs from '@/components/tabs'
 	export default {
-		components:{
+		components: {
 			tabs
 		},
-		computed:{
-		},
+		computed: {},
 		data() {
 			return {
-				includeTabs:localStorage.getItem('includeTabs'),
-			}
-		},
-		watch: {
-			'$route': {
-				handler(to, from){
-					console.log('打印',localStorage.getItem('includeTabs'))
-					if (this.includeTabs.indexOf(to.name)==-1) {//不存在
-						// var arr = localStorage.getItem('includeTabs')
-						// arr.push(to.name)
-						// localStorage.setItem('includeTabs',arr)
-					}
-				},
-				immediate:true
+				includeTabs: this.$store.state.includeTabs,
 			}
 		},
-		methods:{
-			select(e){
-				console.log('点击',e)
-				// this.$store.dispatch('getters')
-			}
+		mounted() {
+			this.includeTabs = this.$store.state.includeTabs
+			console.log('tanb', this.$store.state.tabList, this.$store.state.includeTabs)
 		},
 	}
 </script>

src/views/test/test.vue

@@ -13,7 +13,6 @@
 			}
 		},
 		mounted() {
-			console.log('打印',this.$store)
 		},
 	}
 </script>