VUE keep-alive动态缓存页面

1、App.vue

   <keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
   </keep-alive>
   <router-view v-if="!$route.meta.keepAlive"></router-view>

2、router.js

  {
    path: "/keepAliveDemo",
    name: "keepAliveDemo",
    component: () => import("@/views/test/keep-alive/index.vue"),
    meta: {
      title: "keepAlive使用示例",
      keepAlive: true,
      isRefresh: true,
    },
  },

3、keep-alive/index.vue(缓存页面)

  activated() {
    // isRefresh:表示是否需要刷新
    if (this.$route.meta.isRefresh) {
      this.list = [];
      // 手动刷新页面操作,重置表单、列表、请求.....
    }
  },

  beforeRouteLeave(to, from, next) {
    // 去详情页则将isRefresh改为false,因为从详情页返回不用刷新页面
    // 去非详情页则将isRefresh改为true,因为从其他页面进来需要刷新页面
    if (to.name == "keepAliveDetails") {
      from.meta.isRefresh = false;
    } else {
      from.meta.isRefresh = true;
    }
    next();
  },

4、需求描述:需要缓存列表页面,从列表页点击跳转至详情页,从详情页返回需要缓存之前的数据以及定位到查看详情的项,从其他页面进入列表页需要刷新。

ps:定位元素使用    document.getElementById(`定位元素id`).scrollIntoView();

### 使用 Vue 的 `keep-alive` 组件缓存特定页面 #### 配置 `keep-alive` 实现高效组件管理 为了提高单页应用程序(SPA)中的性能并减少不必要的重新渲染,Vue 提供了 `<keep-alive>` 标签用于包裹动态组件,在组件切换时自动保存进入缓存的状态。当再次访问被缓存的视图时,可以快速恢复之前的状态而不必重新加载整个组件实例。 针对仅需缓存部分而非全部子路由的情况,可以通过设置 `include` 或者 `exclude` 属性来精确控制哪些组件应该被保留于内存之中[^1]: ```html <keep-alive :include="['listPage']"> <router-view></router-view> </keep-alive> ``` 上述代码片段展示了如何利用 `include` 参数指定名称为 `'listPage'` 的组件作为唯一允许缓存的对象;而其他未提及的名字则不会受到此标签的影响,每次导航至这些路径都会创建新的实例[^2]。 #### 动态调整缓存策略适应不同需求 除了静态定义外,还可以通过绑定属性的方式使缓存名单变得灵活多变。例如依据当前用户的操作习惯或是业务逻辑的变化实时增删项名,从而达到更精细化的操作效果: ```javascript data() { return { cachedPages: ['home', 'about'] } } // ... <keep-alive :include="cachedPages"> <!-- ... --> </keep-alive> ``` 这种方法使得开发者能够在运行期间根据实际情况修改要保持活动状态的具体范围,增强了灵活性的同时也提高了资源利用率[^3]。 #### 处理缓存带来的副作用 值得注意的是,启用 `keep-alive` 后可能会遇到一些意想不到的问题,比如某些情况下即使离开了某个页面再回来其内部的数据也没有刷新等问题。为了避免这种情况发生,可以在激活钩子里手动触发数据获取动作,确保显示的内容是最新的版本[^4]: ```javascript activated() { this.fetchData(); }, deactivated() { console.log('Component deactivated'); } ``` 以上就是在 Vue.js 中运用 `keep-alive` 来优化 SPA 性能以及解决潜在问题的一些最佳实践建议。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值