前端：增加打开标签页功能，并启用keep-alive

www/src/permission.js

@@ -6,19 +6,22 @@ import {
 import {
 	makeRouter
 } from "@/utils/router";
+import {useTabsStore} from '@/stores/tabs'
+
 
 
 const whiteList = ['/login'] // no redirect whitelist
 
 router.beforeEach((to) => {
 	const store = useStore()
+	const {tabAdd} = useTabsStore()
 	console.log('start before each')
 
 	if (getToken()) {
 		console.log('已经有token')
 		// 已登录且要跳转的页面是登录页
 		if (to.path === '/login') {
-			return '/dashboard'
+			return '/'
 		} else {
 			console.log('已经登录成功')
 			//登录成功，需要判断router是不是已经按照权限要求构建好，并且菜单是否按照权限要求生成，如没有，则生成
@@ -41,11 +44,12 @@ router.beforeEach((to) => {
 						location.reload()
 					})
 				})
-			} else {
-				console.log('当前生效路由表')
-				console.log(router.getRoutes())
-				return true
 			}
+			console.log('当前生效路由表')
+			console.log(router.getRoutes())
+			tabAdd(to)
+			return true
+
 		}
 	} else {
 		// 无token信息，表示未登录

www/src/router/index.js

@@ -9,11 +9,11 @@ export const constantRouterMap = [
   },
   {
     path: '/dashboard',
-    name: 'dashboard',
     component: () => import('@/views/Layout'),
     children: [
       {
         path: '',
+        name: 'dashboard',
         component: () => import('@/views/DashBoard')
       }
     ]

www/src/stores/tabs.js

@@ -0,0 +1,62 @@
+import {defineStore} from 'pinia'
+import {computed, nextTick, ref} from 'vue'
+import router from '@/router'
+
+export const useTabsStore = defineStore('tabs', () => {
+  const allTabs = ref([])
+  const currentTab = ref(null)
+  const cacheTabs = ref([])
+
+  const tabsList = computed(() => {
+    return allTabs
+  })
+
+
+  // 打开新tab时执行
+  function tabAdd(to) {
+    const isExist = allTabs.value.some(item => {
+      return item.path === to.fullPath
+    })
+    if (!isExist) {
+      allTabs.value.push({
+        name: to.name,
+        path: to.fullPath
+      })
+      currentTab.value = to.name
+      cacheTabs.value.push(to.name)
+    }
+    console.log('update currenttab:', currentTab.value)
+    console.log('cacheTabs:', cacheTabs.value)
+    console.log('all tabs:', allTabs)
+  }
+
+  function tabRemove(removeTab) {
+    console.log('tab remove:', removeTab)
+    for (let i = 0; i < allTabs.value.length; i++) {
+      if (allTabs.value[i].name === removeTab) {
+        allTabs.value.splice(i, 1)
+        cacheTabs.value.splice(i, 1)
+        const nextId = i === allTabs.value.length ? i - 1 : i
+        currentTab.value = allTabs.value[nextId].name
+        console.log(currentTab.value)
+        router.push(allTabs.value[nextId].path)
+      }
+    }
+  }
+
+  function tabClick(selectTab) {
+    console.log('tab click', selectTab)
+    currentTab.value = selectTab.paneName
+    console.log('current tab value:', currentTab.value)
+    console.log('all tabs:', allTabs)
+    allTabs.value.forEach(tab => {
+      console.log(tab.name)
+      if (tab.name === currentTab.value) {
+        console.log('router to:', tab.path)
+        router.push(tab.path)
+      }
+    })
+  }
+
+  return {currentTab, allTabs, cacheTabs, tabsList, tabAdd, tabRemove, tabClick}
+})

www/src/views/Layout.vue

@@ -9,7 +9,21 @@
           <menu-list></menu-list>
         </el-aside>
         <el-main>
-          <router-view></router-view>
+          <el-tabs style="border-bottom: 0" v-model="currentTab" type="border-card" closable @tab-click="tabClick" @tab-remove="tabRemove">
+            <el-tab-pane v-for="tab in allTabs" :key="tab.name" :label="tab.name" :name="tab.name">
+            </el-tab-pane>
+          </el-tabs>
+
+          <div style="margin-top: 10px">
+             <router-view v-slot="{Component}">
+            <keep-alive :include="cacheTabs">
+              <component :is="Component"/>
+            </keep-alive>
+          </router-view>
+          </div>
+          <!--详见：https://router.vuejs.org/zh/guide/migration/index.html#router-view-%E3%80%81-keep-alive-%E5%92%8C-transition-->
+
+
         </el-main>
       </el-container>
     </el-container>
@@ -19,9 +33,22 @@
 <script setup>
   import MenuList from '../components/MenuList'
   import HeaderContent from '@/components/HeaderContent'
+  import {useTabsStore} from '@/stores/tabs'
+  import {watch} from 'vue'
+  import {storeToRefs} from 'pinia'
 
+  const tabStore = useTabsStore()
+  const {currentTab, allTabs, cacheTabs, tabsList} = storeToRefs(tabStore)
+  const {addTab, tabRemove, tabClick} = tabStore
+
+  console.log(tabsList.value)
+  watch(currentTab, (newValue, oldValue) => {
+    console.log('current Tab changed:', newValue)
+  })
 </script>
 
 <style>
-
+.el-tabs--border-card>.el-tabs__content {
+  padding: 0;
+}
 </style>