up

public/json/user.json

@@ -6,37 +6,44 @@
 			"userName": "Administrator"
 		},
 		"menuList": [{
-				"name": "组件",
+				"name": "vab",
 				"path": "/vab",
 				"meta": {
+					"title": "组件",
 					"icon": "el-icon-takeaway-box"
 				},
 				"children": []
 			},
 			{
-				"name": "布局",
+				"name": "layout2",
 				"path": "/layout",
 				"meta": {
+					"title": "组件",
 					"icon": "el-icon-files"
 				},
 				"children": [{
 						"path": "/layout/list",
-						"name": "列表",
+						"name": "list",
-						"meta": {},
+						"meta": {
+							"title": "列表"
+						},
 						"component": "list"
 					},
 					{
 						"path": "/layout/show",
-						"name": "详情",
+						"name": "show",
-						"meta": {},
+						"meta": {
+							"title": "详情"
+						},
 						"component": "show"
 					}
 				]
 			},
 			{
-				"name": "其他",
+				"name": "other",
 				"path": "/other",
 				"meta": {
+					"title": "其他",
 					"icon": "el-icon-more"
 				},
 				"children": [
@@ -44,6 +51,7 @@
 						"path": "/link",
 						"name": "外部链接",
 						"meta": {
+							"title": "外部链接",
 							"icon": "el-icon-link"
 						},
 						"children": [
@@ -51,6 +59,7 @@
 								"path": "https://baidu.com",
 								"name": "百度",
 								"meta": {
+									"title": "百度",
 									"target": "_blank"
 								}
 							},
@@ -58,6 +67,7 @@
 								"path": "https://www.google.cn",
 								"name": "谷歌",
 								"meta": {
+									"title": "谷歌",
 									"target": "_blank"
 								}
 							}
@@ -67,24 +77,33 @@
 						"path": "/iframe",
 						"name": "Iframe",
 						"meta": {
+							"title": "Iframe",
 							"icon": "el-icon-position"
 						},
 						"children": [
 							{
 								"path": "https://vue3js.cn/docs/zh/",
-								"name": "VUE 3"
+								"name": "VUE 3",
+								"meta": {
+									"title": "VUE 3"
+								}
 							},
 							{
 								"path": "https://element-plus.org?id=1",
-								"name": "Element Plus"
+								"name": "Element Plus",
+								"meta": {
+									"title": "Element Plus"
+								}
 							}
 						]
 					},
 					{
 						"path": "/other/lala",
 						"name": "404",
-						"meta": {},
+						"component": "lala",
-						"component": "lala"
+						"meta": {
+							"title": "模拟404"
+						}
 					}
 				]
 			},
@@ -92,12 +111,15 @@
 				"name": "配置",
 				"path": "/setting",
 				"meta": {
+					"title": "配置",
 					"icon": "el-icon-setting"
 				},
 				"children": [{
 					"path": "/setting/1",
 					"name": "setting1",
-					"meta": {},
+					"meta": {
+						"title": "系统设置"
+					},
 					"component": "lala"
 				}]
 			}

src/App.vue

@@ -5,7 +5,9 @@
 <script>
 	export default {
 		name: 'App',
-		setup() {}
+		setup() {
+			
+		}
 	}
 </script>
 

src/layout/components/NavMenu.vue

@@ -6,12 +6,12 @@
 		<el-menu-item v-if="!navMenu.children" :index="navMenu.path">
 			<a v-if="navMenu.meta&&navMenu.meta.target" :href="navMenu.path" :target="navMenu.meta.target" @click.stop='a'></a>
 			<i v-if="navMenu.meta&&navMenu.meta.icon" :class="navMenu.meta.icon || 'el-icon-menu'"></i>
-			<span>{{navMenu.name}}</span>
+			<span>{{navMenu.meta.title}}</span>
 		</el-menu-item>
 		<el-submenu v-if="navMenu.children" :index="navMenu.path">
 			<template #title>
 				<i v-if="navMenu.meta&&navMenu.meta.icon" :class="navMenu.meta.icon || 'el-icon-menu'"></i>
-				<span> {{navMenu.name}}</span>
+				<span> {{navMenu.meta.title}}</span>
 			</template>
 			<NavMenu :navMenus="navMenu.children"></NavMenu>
 		</el-submenu>

src/layout/components/head.vue

@@ -3,7 +3,7 @@
 		<div class="left-panel">
 			<el-breadcrumb separator-class="el-icon-arrow-right">
 				<template v-for="(item) in breadList" v-bind:key="item" >
-					<el-breadcrumb-item v-if="item.path !='/'"><i v-if="item.meta&&item.meta.icon" :class="item.meta.icon || 'el-icon-menu'"></i>{{item.name}}</el-breadcrumb-item>
+					<el-breadcrumb-item v-if="item.path !='/'"><i v-if="item.meta&&item.meta.icon" :class="item.meta.icon || 'el-icon-menu'"></i>{{item.meta.title}}</el-breadcrumb-item>
 				</template>
 			</el-breadcrumb>
 		</div>

src/layout/components/side.vue

@@ -3,7 +3,7 @@
 		<div class="adminui-side-split-scroll">
 			<ul>
 				<li v-for="item in menu" v-bind:key="item" :class="pmenu.path==item.path?'active':''" @click="showMenu(item)"><i :class="item.meta.icon || 'el-icon-menu'"></i>
-					<p>{{ item.name }}</p>
+					<p>{{ item.meta.title }}</p>
 				</li>
 			</ul>
 		</div>

src/layout/components/tags.vue

@@ -3,7 +3,7 @@
 		<ul>
 			<li v-for="tag in tagList" v-bind:key="tag" :class="isActive(tag) ? 'active' : '' " @contextmenu.prevent="openContextMenu($event, tag)">
 				<router-link :to="tag">
-				{{ tag.name }}
+				{{ tag.meta.title }}
 				<i v-if="!tag.meta.affix" class="el-icon-close" @click.prevent.stop='closeSelectedTag(tag)'></i>
 				</router-link>
 			</li>
@@ -59,6 +59,7 @@
 
 <script>
 	export default {
+		name: "tags",
 		data() {
 			return {
 				contextMenuVisible: false,
@@ -104,6 +105,7 @@
 					}
 				})
 				if(!ishas){
+					this.$store.commit("pushKeepLive",route.name)
 					this.tagList.push(route)
 				}
 			},
@@ -115,6 +117,7 @@
 			closeSelectedTag(tag) {
 				const newtagList = this.tagList.filter(item => item.path !== tag.path)
 				this.tagList = newtagList;
+				this.$store.commit("removeKeepLive", tag.name)
 				if (this.isActive(tag)) {
 					const latestView = newtagList.slice(-1)[0]
 					if (latestView) {

src/layout/index.vue

@@ -5,7 +5,8 @@
 		<Head></Head>
 		<Tags></Tags>
 		<div class="adminui-main">
-			<router-view :key="$route.fullPath"></router-view>
+			<router-view></router-view>
+			<!-- <router-view :key="$route.fullPath"></router-view> -->
 		</div>
 	</div>
 

src/router/index.js

@@ -6,23 +6,25 @@ import tool from '@/utils/tool';
 
 //系统路由
 const routes = [{
-		path: "/",
 		name: "layout",
+		path: "/",
 		component: () => import(/* webpackChunkName: "layout" */ '@/layout'),
 		redirect: '/dashboard',
 		children: [
 			{
+				name: "home",
 				path: "/home",
-				name: "首页",
 				component: () => import(`@/views/other/empty`),
 				meta: {
+					title: "首页",
 					icon: "el-icon-platform-eleme"
 				},
 				children: [
 					{
+						name: "dashboard",
 						path: "/dashboard",
-						name: "控制台",
 						meta: {
+							title: "控制台",
 							affix: true
 						},
 						component: () => import(/* webpackChunkName: "home" */ '@/views/home'),
@@ -32,9 +34,12 @@ const routes = [{
 		]
 	},
 	{
+		name: "login",
 		path: "/login",
-		name: "登录",
 		component: () => import(/* webpackChunkName: "login" */ '@/views/login'),
+		meta: {
+			title: "登录"
+		}
 	}
 ]
 

src/store/index.js

@@ -1,8 +1,8 @@
 import { createStore } from 'vuex';
-import tagsView from './modules/tagsView';
+import keepAlive from './modules/keepAlive';
 
 export default createStore({
 	modules: {
-		tagsView
+		keepAlive
 	}
 });

src/store/modules/keepAlive.js

@@ -0,0 +1,21 @@
+export default {
+	state: {
+		keepLiveRoute: []
+	},
+	mutations: {
+		pushKeepLive(state, component){
+			if(!state.keepLiveRoute.includes(component)){
+				state.keepLiveRoute.push(component)
+			}
+		},
+		removeKeepLive(state, component){
+			var index = state.keepLiveRoute.indexOf(component);
+			if(index !== -1){
+				state.keepLiveRoute.splice(index, 1);
+			}
+		},
+		clearKeepLive(state){
+			state.keepLiveRoute = []
+		}
+	}
+}

src/store/modules/tagsView.js

@@ -1,24 +0,0 @@
-export default {
-	state: {
-		visitedViews: [],
-		cachedViews: []
-	},
-	mutations: {
-		ADD_VISITED_VIEWS: (state, view) => {
-			if (state.visitedViews.some(v => v.path === view.path)) return
-			state.visitedViews.push(Object.assign({}, view, {
-				title: view.meta.title || 'no-name'
-			}))
-			if (!view.meta.noCache) {
-				state.cachedViews.push(view.name)
-			}
-		},
-	},
-	actions: {
-		addVisitedViews({
-			commit
-		}, view) {
-			commit('ADD_VISITED_VIEWS', view)
-		},
-	}
-}

src/views/home.vue

@@ -45,13 +45,21 @@
 </template>
 
 <script>
+	export default {
+		name: "dashboard",
+		data() {
+			return {
+
+			}
+		}
+	}
 </script>
 
 <style scoped>
 	.el-row {margin-bottom:20px;}
 	.el-tag+.el-tag {margin-left: 10px;}
-	
+
-	
+
 	.welTop {display: flex;}
 	.welTop .main {margin-left:20px;}
 	.welTop .main h2 {font-size: 20px;color: #3c4a54;}

src/views/list.vue

@@ -1,10 +1,19 @@
 <template>
 	<div>
 		<el-empty description="LIST"></el-empty>
+		<el-input v-model="input" placeholder="请输入内容"></el-input>
 	</div>
 </template>
 
 <script>
+	export default {
+		name: 'list',
+		data() {
+			return {
+				input: ""
+			}
+		}
+	}
 </script>
 
 <style>

src/views/other/empty.vue

@@ -1,3 +1,20 @@
 <template>
-	<router-view></router-view>
+	<router-view v-slot="{ Component }">
+		<keep-alive :include="keepAliveNameList">
+			<component :is="Component" :key="$route.fullPath"/>
+		</keep-alive>
+	</router-view>
 </template>
+
+<script>
+	export default {
+		data() {
+			return {
+				keepAliveNameList: this.$store.state.keepAlive.keepLiveRoute
+			}
+		},
+		created: function() {
+			
+		},
+	}
+</script>

src/views/show.vue

@@ -1,15 +1,17 @@
 <template>
 	<div>
 		<el-empty description="SHOW"></el-empty>
+		<el-input v-model="input" placeholder="请输入内容"></el-input>
 	</div>
 </template>
 
 <script>
 	export default {
+		name: 'show',
 		data() {
 			return {
-				input: ''
+				input: ""
-			};
+			}
 		}
 	}
 </script>