【vue3.0】keep-alive 路由页面缓存
前言在使用Vue开发单页面应用时,我们通常会使用Vue-Router进行页面导航,Vue-Router在进行路由切换的时候,页面是会重新加载,对应的生命周期函数也会再次执行一遍,但是在有些业务场景下,是不需要重新加载的。先简单介绍一下什么情况下会用到keep-alive1,当使用路由跳转到其他页面的时候,要求缓存当前页面,比如在有分页数据列表中,切换到第三页需要查看列表对应数据的详情页面,然后返回
前言
在使用Vue开发单页面应用时,我们通常会使用Vue-Router进行页面导航,Vue-Router在进行路由切换的时候,页面是会重新加载,对应的生命周期函数也会再次执行一遍,但是在有些业务场景下,是不需要重新加载的。
先简单介绍一下什么情况下会用到keep-alive
1,当使用路由跳转到其他页面的时候,要求缓存当前页面,比如在有分页数据列表中,切换到第三页需要查看列表对应数据的详情页面,然后返回,如果不加任何处理,列表页面会重新加载,默认显示第一页数据,而不在是之前的第三页,这样如果还需要查看之前查看数据的下一条时,还需要切换到第三页,如此反复。
2,在列表页面进行条件筛选查询,查询到对应的数据后查询详情,跳转详情页面,然后在返回,列表默认会清空查询条件,显示所有数据。
keep-alive用法
1,Vue中提供了一个内置组件keep-alive,使用元素将动态组件包裹起来,内部组件就会被缓存起来。
2,包裹的组件,加载过的页面,再次进入时,是不会执行页面第一次进入时的部分生命周期函数。
3,包裹的组件会新增两个生命周期函数activated和deactivated.
两个属性include和exclude可以让实现有条件的进行缓存。include包含的组件会被进行缓存,exclude包含的组件不会被缓存。
keep-alive 实现路由页面缓存的俩中方式
1,使用include控制需要缓存的页面
<router-view v-slot="{ Component }">
<keep-alive include="testKA">
<component :is="Component"/>
</keep-alive>
</router-view>
2,使用router的meta属性控制需要缓存的页面
<router-view v-if='isRouterAlive' v-slot='{Component}'>
<keep-alive>
<component :is='Component' v-if='$route.meta.keepAlive' :key='$route.name' />
</keep-alive>
<component :is='Component' v-if='!$route.meta.keepAlive' :key='$route.name' />
</router-view>
2-1,动态设置路由是否需要被缓存
App.vue
import router from './router'
router.beforeEach((to, from, next) => {
const cacheList = to.meta.cacheList
if (cacheList) {
if (cacheList.indexOf(from.name) > -1) {
to.meta.keepAlive = true
} else {
if (from.name) {
to.meta.keepAlive = false
} else {
to.meta.keepAlive = true
}
}
}
next()
})
需要缓存的组件内
import { onBeforeRouteLeave } from 'vue-router'
setup () {
const store = useStore()
onBeforeRouteLeave((to, from, next) => {
const cacheList = ['组织']
if (cacheList.indexOf(to.name) === -1) {
doing()
nextTick(() => {
doing()
})
}
next()
})
return {
store,
}
}
更多推荐
所有评论(0)