vue3项目如何使用keepAlive?如何实现回退到这个页面时不刷新,跳转至这个页面时会刷新?
前言:
页面A为首页面、页面B为设置了keepAlive的页面、页面C为新页面
问题:
只有第一次进入项目时,页面B加载一次,之后无论跳转还是切换都不刷新页面B了!!!o(╯□╰)o
要求:
只要是跳转至页面B,刷新B
只要是回退到页面B,不刷新B
解决:
加代码,App页面加入:key="$route.fullPath",跳转时加个实时时间的参数即可,代码如下:
一、如何给页面B设置keepAlive,保证这个页面不刷新
App.vue页面
<template>
<div id="app">
<router-view v-slot="{ Component }">
<keep-alive>
<component :is="Component" v-if="$route.meta.keepAlive" :key="$route.fullPath"/>
</keep-alive>
<component :is="Component" v-if="!$route.meta.keepAlive" :key="$route.fullPath"/>
</router-view>
</div>
</template>
router/index.js页面
import { createRouter, createWebHistory } from 'vue-router'
const router = createRouter({
history: createWebHistory(process.env.BASE_URL), // 使用 process.env.BASE_URL
routes: [
{
path: '/B',
name: 'B',
component: () => import('../view/test/B.vue'),
meta: { //只需要加入这个就行了
keepAlive: true,
},
}
],
})
export default router
二、实现A跳转B时,刷新页面B
页面A:
<template>
<button @click="jumpButton">A页面</button>
</template>
<script setup>
const wheelButton = () => {
nextTick(() => { //等待路由加载完再跳转
router.push({
path: '/B',
query: { reload: Date.now() } // reload 参数确保URL变化(使用keepalive时要求重新进入这个页面强制刷新)
});
});
}
</script>
这样就能实现,A跳转B刷新B,C回退B不会刷新B了~(* ̄︶ ̄)