vue3.0实现前进刷新后退不刷新

大龙Aiden

已于 2022-07-31 09:57:25 修改

阅读量3k

点赞数 4

CC 4.0 BY-SA版权

分类专栏： Vue3.0 文章标签： Vue3.0 vue-router keep-alive 缓存不刷新

于 2022-07-16 13:44:50 首次发布

本文链接：https://blog.youkuaiyun.com/Mr_JavaScript/article/details/125817007

Vue3.0 专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了如何在Vue 3.0项目中使用keep-alive配合路由守卫，实现从一级首页到二级列表页刷新，再到三级详情页刷新，但详情页返回列表时不刷新的场景。通过定义isKeepAlive变量和beforeEnter守卫，灵活控制B页面的缓存状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

vue2.0实现前进刷新，后退缓存的例子有很多，但是vue3.0版本的没有找到，刚好有一个同学咨询这个问题，所以现在有空了写一篇文章来谈谈，怎么用vue3.0的轮子去实现前进刷新后退缓存。

场景

项目里有三个页面，分别为一级首页、二级列表页和三级详情页，从首页进入列表页刷新，从列表页进入详情页刷新，但是从详情页返回列表页不刷新，所以需要缓存的是二级列表页。

理论

通过keep-alive缓存组件；
组件路由里定义一个变量isKeepAlive来控制组件的缓存；
通过路由独享守卫根据条件修改缓存变量，选择性缓存组件。

实现

比方说三级页面分别为A、B和C，我们需要对B页面根据路由信息进行条件缓存

1、路由的配置

B组件的路由里定义一个变量isKeepAlive，同时还有一个路由独享守卫方法beforeEnter，当进入B页面时触发beforeEnter，我们判断如果是从C页面进入B页面，修改isKeepAlive为True使B页面缓存起来。

{
  path: '/a',
  name: 'A',
  component: ()=> import('../views/A.vue'),
  meta: {
    title: 'A Page'
  }
},
{
  path: '/b',
  name: 'B',
  component: ()=> import('../views/B.vue'),
  meta: {
    title: 'B Page',
    isKeepAlive: false,
  },
  // 路由独享守卫
  beforeEnter: (to, from) => {
    to.meta.isKeepAlive =  to.name==='B' && from.name=='C' ? true : false
    return true
  },
},
{
  path: '/c',
  name: 'C',
  component: ()=> import('../views/C.vue'),
  meta: {
    title: 'C Page'
  }
}

（注：路由的初始化略）

2、配置keep-alive

// App.vue
<router-view v-slot="{Component, route}">
  <keep-alive>
    <component :is="Component" v-if="route.meta.isKeepAlive"/>
  </keep-alive>
  <component :is="Component" v-if="!route.meta.isKeepAlive" />
</router-view>

3、B页面根据isKeepAlive来请求数据

import { onMounted } from 'vue';
import { useRoute } from 'vue-router'

const route = useRoute()

onMounted(()=> {
    if(route.meta.isKeepAlive) return
    console.log('init data')    // 获取列表数据
})

（完）

参考文献：

导航守卫 | Vue Router