Skip to content

Commit ed628db

Browse files
jzfaijzfai
committed
remove third keep alive func
1 parent b3d7f18 commit ed628db

File tree

16 files changed

+136
-173
lines changed

16 files changed

+136
-173
lines changed

‎eslintrc/eslint-config.js

+1-2
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,7 @@ module.exports = defineConfig({
77
node: true
88
},
99
globals: {
10-
defineOptions: true,
11-
$ref: true
10+
defineOptions: true
1211
},
1312
plugins: ['@typescript-eslint', 'prettier', 'unicorn'],
1413
extends: [

‎mock/system.js renamed to ‎mock/user.js

File renamed without changes.

‎src/api/system.js renamed to ‎src/api/user.js

-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
//获取用户信息
21
import axiosReq from 'axios'
32
// export const userInfoReq = (): Promise<any> => {
43
// return new Promise((resolve) => {

‎src/layout/app-main/Navbar.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ import { resetState } from '@/hooks/use-permission'
4747
import { elMessage } from '@/hooks/use-element'
4848
import { useBasicStore } from '@/store/basic'
4949
import { langTitle } from '@/hooks/use-common'
50-
import {loginOutReq} from "@/api/system";
50+
import {loginOutReq} from "@/api/user";
5151
5252
const basicStore = useBasicStore()
5353
const { settings, sidebar, setToggleSideBar } = basicStore

‎src/layout/app-main/index.vue

+27-84
Original file line numberDiff line numberDiff line change
@@ -16,107 +16,50 @@
1616
</template>
1717

1818
<script setup>
19-
import { computed, watch } from 'vue'
19+
import settings from "@/settings"
20+
import { watch } from 'vue'
2021
import { storeToRefs } from 'pinia/dist/pinia'
2122
import { useRoute } from 'vue-router'
22-
2323
import { useBasicStore } from '@/store/basic'
24-
import { cloneDeep } from '@/hooks/use-common'
25-
const { settings, cachedViews } = storeToRefs(useBasicStore())
24+
const { cachedViews } = storeToRefs(useBasicStore())
2625
const route = useRoute()
27-
const key = computed(() => route.path)
28-
/*listen the component name changing, then to keep-alive the page*/
29-
// cachePage: is true, keep-alive this Page
30-
// leaveRmCachePage: is true, keep-alive remote when page leave
3126
let oldRoute = {}
3227
let cacheGroup = []
33-
let deepOldRouter = null
3428
const basicStore = useBasicStore()
35-
const removeDeepChildren = (deepOldRouter) => {
36-
deepOldRouter.children?.forEach((fItem) => {
37-
basicStore.delCacheViewDeep(fItem.name)
38-
})
39-
}
29+
4030
watch(
41-
() => route.name,
42-
() => {
43-
const routerLevel = route.matched.length
44-
//缓存组处理
45-
//first judge cacheGroup and then remove
46-
if (cacheGroup.length) {
47-
if (!cacheGroup.includes(route.name)) {
48-
cacheGroup.forEach((item) => {
49-
basicStore.delCachedView(item)
31+
() => route.name,
32+
() => {
33+
//缓存组处理
34+
//first judge cacheGroup and then remove
35+
if (cacheGroup.length) {
36+
if (!cacheGroup.includes(route.name)) {
37+
cacheGroup.forEach((item) => {
38+
basicStore.delCachedView(item)
39+
})
40+
}
41+
}
42+
//and then cache the current router config page
43+
if (route.meta?.cacheGroup) {
44+
cacheGroup = route.meta?.cacheGroup || []
45+
cacheGroup.forEach((fItem) => {
46+
basicStore.addCachedView(fItem)
5047
})
5148
}
52-
}
53-
//and then cache the current router config page
54-
if (route.meta?.cacheGroup) {
55-
cacheGroup = route.meta?.cacheGroup || []
56-
cacheGroup.forEach((fItem) => {
57-
basicStore.addCachedView(fItem)
58-
})
59-
}
60-
61-
//二级路由处理
62-
if (routerLevel === 2) {
63-
if (deepOldRouter?.name) {
64-
if (deepOldRouter.meta?.leaveRmCachePage && deepOldRouter.meta?.cachePage) {
65-
basicStore.delCachedView(deepOldRouter.name)
66-
//remove the deepOldRouter‘s children component
67-
removeDeepChildren(deepOldRouter)
68-
}
69-
} else {
70-
if (oldRoute?.name) {
71-
if (oldRoute.meta?.leaveRmCachePage && oldRoute.meta?.cachePage) {
72-
basicStore.delCachedView(oldRoute.name)
73-
}
49+
//二级路由处理
50+
if (oldRoute?.name) {
51+
if (oldRoute.meta?.leaveRmCachePage && oldRoute.meta?.cachePage) {
52+
basicStore.delCachedView(oldRoute.name)
7453
}
7554
}
76-
7755
if (route.name) {
7856
if (route.meta?.cachePage) {
7957
basicStore.addCachedView(route.name)
8058
}
8159
}
82-
deepOldRouter = null
83-
}
84-
85-
//三级路由处理
86-
if (routerLevel === 3) {
87-
//三级时存储当前路由对象的上一级
88-
const parentRoute = route.matched[1]
89-
//deepOldRouter不为空，且deepOldRouter不是当前路由的父对象，则需要清除deepOldRouter缓存
90-
//一般为三级路由跳转三级路由的情况
91-
if (deepOldRouter?.name && deepOldRouter.name !== parentRoute.name) {
92-
if (deepOldRouter.meta?.leaveRmCachePage && deepOldRouter.meta?.cachePage) {
93-
basicStore.delCachedView(deepOldRouter.name)
94-
//remove the deepOldRouter‘s children component
95-
removeDeepChildren(deepOldRouter)
96-
}
97-
} else {
98-
//否则走正常两级路由处理流程
99-
if (oldRoute?.name) {
100-
if (oldRoute.meta?.leaveRmCachePage && oldRoute.meta?.cachePage) {
101-
basicStore.delCacheViewDeep(oldRoute.name)
102-
}
103-
}
104-
}
105-
//取的是第二级的name
106-
if (parentRoute.name && parentRoute.meta?.cachePage) {
107-
deepOldRouter = parentRoute
108-
basicStore.addCachedView(deepOldRouter.name)
109-
if (route.name) {
110-
if (route.meta?.cachePage) {
111-
//和第三级的name进行缓存
112-
basicStore.addCachedViewDeep(route.name)
113-
}
114-
}
115-
}
116-
}
117-
oldRoute = cloneDeep({ name: route.name, meta: route.meta })
118-
},
119-
{ immediate: true }
60+
oldRoute = JSON.parse(JSON.stringify({ name: route.name, meta: route.meta }))
61+
},
62+
{ immediate: true }
12063
)
12164
</script>
12265

‎src/router/index.js

+6-4
Original file line numberDiff line numberDiff line change
@@ -46,14 +46,14 @@ export const constantRoutes = [
4646
{
4747
path: '/setting-switch',
4848
component: Layout,
49-
alwaysShow:true,
50-
meta: { title: 'Setting Switch', elSvgIcon: 'Fold' },
49+
alwaysShow:false,
50+
meta: { title: 'Setting Switch', elSvgIcon: 'Setting' },
5151
children: [
5252
{
5353
path: 'index',
5454
component: () => import('@/views/setting-switch/index.vue'),
5555
name: 'SettingSwitch',
56-
meta: { title: 'Setting Switch', elSvgIcon: 'example' }
56+
meta: { title: 'Setting Switch', elSvgIcon: 'Setting' }
5757
}
5858
]
5959
},
@@ -116,6 +116,7 @@ export const constantRoutes = [
116116
]
117117
},
118118
basicDemo,
119+
{ path: "/:pathMatch(.*)", redirect: "/404", hidden: true }
119120
]
120121

121122
//角色和code数组动态路由
@@ -128,9 +129,10 @@ export const roleCodeRoutes = [
128129
*/
129130
export const asyncRoutes = [
130131
// 404 page must be placed at the end !!!
131-
{ path: '/:catchAll(.*)', name: 'CatchAll', redirect: '/404', hidden: true }
132+
{ path: "/:pathMatch(.*)", redirect: "/404", hidden: true },
132133
]
133134

135+
134136
const router = createRouter({
135137
history: createWebHashHistory(),
136138
scrollBehavior: () => ({ top: 0 }),

‎src/router/modules/basic-demo.js

+31-23
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,14 @@ const BasicDemo = {
3535
name: 'Parent',
3636
meta: { title: 'Parent Children' }
3737
},
38+
{
39+
path: 'second-keep-alive',
40+
component: () => import('@/views/basic-demo/keep-alive/second-keep-alive.vue'),
41+
name: 'SecondKeepAlive',
42+
//cachePage: cachePage when page enter, default false
43+
//leaveRmCachePage: remove cachePage when page leave, default false
44+
meta: { title: 'Send KeepAlive', cachePage: true, closeTabRmCache: false }
45+
},
3846
{
3947
path: 'keep-alive-group',
4048
component: () => import('@/views/basic-demo/keep-alive/index.vue'),
@@ -65,29 +73,29 @@ const BasicDemo = {
6573
//closeTabRmCache: remove cachePage when tabs close, default false
6674
meta: { title: 'Tab KeepAlive', cachePage: true, closeTabRmCache: true }
6775
},
68-
//third-keep-alive
69-
{
70-
path: 'third-keep-alive',
71-
name: 'ThirdKeepAlive',
72-
component: () => import('@/views/basic-demo/keep-alive/third-keep-alive.vue'),
73-
//注：移除父容器页面缓存会把子页面一起移除了
74-
meta: { title: 'Third KeepAlive', cachePage: true, leaveRmCachePage: false },
75-
alwaysShow: true,
76-
children: [
77-
{
78-
path: 'second-children',
79-
name: 'SecondChildren',
80-
component: () => import('@/views/basic-demo/keep-alive/third-children/SecondChildren.vue'),
81-
meta: { title: 'SecondChildren', cachePage: true, leaveRmCachePage: true }
82-
},
83-
{
84-
path: 'third-children',
85-
name: 'ThirdChildren',
86-
component: () => import('@/views/basic-demo/keep-alive/third-children/ThirdChildren.vue'),
87-
meta: { title: 'ThirdChildren', cachePage: true, leaveRmCachePage: false }
88-
}
89-
]
90-
},
76+
//third-keep-alive(已作废)
77+
// {
78+
// path: 'third-keep-alive',
79+
// name: 'ThirdKeepAlive',
80+
// component: () => import('@/views/basic-demo/keep-alive/third-keep-alive.vue'),
81+
// //注：移除父容器页面缓存会把子页面一起移除了
82+
// meta: { title: 'Third KeepAlive', cachePage: true, leaveRmCachePage: false },
83+
// alwaysShow: true,
84+
// children: [
85+
// {
86+
// path: 'second-children',
87+
// name: 'SecondChildren',
88+
// component: () => import('@/views/basic-demo/keep-alive/third-children/SecondChildren.vue'),
89+
// meta: { title: 'SecondChildren', cachePage: true, leaveRmCachePage: true }
90+
// },
91+
// {
92+
// path: 'third-children',
93+
// name: 'ThirdChildren',
94+
// component: () => import('@/views/basic-demo/keep-alive/third-children/ThirdChildren.vue'),
95+
// meta: { title: 'ThirdChildren', cachePage: true, leaveRmCachePage: false }
96+
// }
97+
// ]
98+
// },
9199
{
92100
path: 'worker',
93101
component: () => import('@/views/basic-demo/worker/index.vue'),

‎src/store/basic.js

+5
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,11 @@ export const useBasicStore = defineStore('basic', {
3939
})
4040
})
4141
},
42+
clearPromiseArr() {
43+
this.$patch((state) => {
44+
state.axiosPromiseArr=[]
45+
})
46+
},
4247
setToken(data) {
4348
this.token = data
4449
},

‎src/utils/axios-req.js

+2-6
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,6 @@ service.interceptors.request.use(
3434
background: 'rgba(0, 0, 0, 0.3)'
3535
})
3636
}
37-
3837
return req
3938
},
4039
(err) => {
@@ -45,9 +44,7 @@ service.interceptors.request.use(
4544
//请求后拦截
4645
service.interceptors.response.use(
4746
(res) => {
48-
//取消请求
49-
useBasicStore().remotePromiseArrByReqUrl(tempReqUrlSave)
50-
47+
useBasicStore().remotePromiseArrByReqUrl(tempReqUrlSave) //从请求集合中移除
5148
if (loadingInstance) {
5249
loadingInstance && loadingInstance.close()
5350
}
@@ -84,8 +81,7 @@ service.interceptors.response.use(
8481
},
8582
//响应报错
8683
(err) => {
87-
//取消请求
88-
useBasicStore().remotePromiseArrByReqUrl(tempReqUrlSave)
84+
useBasicStore().remotePromiseArrByReqUrl(tempReqUrlSave) //从请求集合中移除
8985
if (loadingInstance) {
9086
loadingInstance && loadingInstance.close()
9187
}

‎src/views/basic-demo/keep-alive/second-keep-alive.vue

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<template>
2+
<div class="scroll-y">
3+
<div class="font-bold mb-10px">Second Page KeepAlive Demo</div>
4+
5+
<el-form ref="refsearchForm" :inline="true" class="mt-2">
6+
<el-form-item label-width="0px" label="" prop="errorLog" label-position="left">
7+
<el-input v-model="searchForm.name" class="w-150px" placeholder="input to test keepAlive" />
8+
</el-form-item>
9+
<el-form-item label-width="0px" label="" prop="pageUrl" label-position="left">
10+
<el-input v-model="searchForm.age" class="w-150px" placeholder="input to test keepAlive" />
11+
</el-form-item>
12+
</el-form>
13+
<el-button type="primary" @click="routerDemoF">to SecondChild.vue</el-button>
14+
</div>
15+
</template>
16+
<script setup lang="ts" name="SecondKeepAlive">
17+
//使用keep-alive 1.设置name（必须） 2.在路由配置处设置cachePage：即可缓存
18+
const searchForm = reactive({
19+
name: '',
20+
age: ''
21+
})
22+
const testRef = ref(1)
23+
//赋值
24+
testRef.value = 2
25+
console.log(testRef.value)
26+
onActivated(() => {
27+
console.log('onActivated')
28+
})
29+
onDeactivated(() => {
30+
console.log('onDeactivated')
31+
})
32+
33+
const routerDemoF = () => {
34+
//推荐路由跳转根据router的name,这样在你修改路径时，只要不修改name，就没有影响。
35+
//推荐传递的是query参数，好处是刷新时可以回显，传入的obj对象会反序列化。
36+
routerPush('SecondChild', { name: 'SecondKeepAlive' })
37+
}
38+
</script>

‎src/views/basic-demo/keep-alive/third-children/SecondChildren.vue

-10
This file was deleted.

‎src/views/basic-demo/keep-alive/third-children/ThirdChildren.vue

-10
This file was deleted.

‎src/views/basic-demo/keep-alive/third-keep-alive.vue

-19
This file was deleted.

0 commit comments

Comments
 (0)