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

前言 

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

场景

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

理论

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

实现 

比方说三级页面分别为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