VUE3+keep-alive缓存页面，实现返回上一页不刷新页面

1、app.vue使用keep-alive组件，vue3中最新写法，keep-alive嵌套要放在router-view里面，这样就导致清除缓存存在问题，通过v-if控制时，路由会先刷新再跳转，这样就导致跳转加载闪屏，用户体验不好

2、router.js配置路由，添加拦截

{path: '/student',name: 'student',component: () => import('../components/student.vue'),meta: {keepAlive: true,cacheList: ['studentDetail', 'evaluate']}
},

//路由拦截
router.beforeEach((to, from, next) => {//从cacheList中的任何一个页面返回，当前页面缓存const cacheList = to.meta.cacheListif (cacheList) {if (cacheList.indexOf(from.name) > -1) {to.meta.keepAlive = true} else {//如果没有纳进cacheList缓存需求，就不缓存if (from.name) {to.meta.keepAlive = false}// 导航跳转需要缓存处理if (from.meta.cacheList) {to.meta.keepAlive = true}}}next()
})

3、搭配activated和onBeforeRouteLeave路由离开时状态，处理同样需要缓存页面的刷新问题

    var refreshFlag = ref(0)onActivated(() => {if (refreshFlag.value == 1) {currentPage.value = 1pageSize.value = 10params.page = currentPage.valueparams.limit = pageSize.valuegetList()}})// 跳转导航去掉缓存，分B页面需要缓存和不需要缓存两种情况onBeforeRouteLeave((to, from, next) => {if (to.meta.cacheList && to.meta.cacheList.length > 0 || !to.name) {refreshFlag.value = 1} else {refreshFlag.value = 0}next()})

再跳转回来后刷新表格。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！