深入理解vue-router之keep-alive_网络技术_宿州市腾雀网络科技有限公司

深入理解vue-router之keep-alive

发布时间 - 2026-01-11 03:03:00 点击率：次

本文基于 Vue2.0

keep-alive 简介

keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。

用法也很简单：

<keep-alive>
 <component>
  <!-- 该组件将被缓存！ -->
 </component>
</keep-alive>

props

include - 字符串或正则表达，只有匹配的组件会被缓存
exclude - 字符串或正则表达式，任何匹配的组件都不会被缓存

// 组件 a
export default {
 name: 'a',
 data () {
  return {}
 }
}

<keep-alive include="a">
 <component>
  <!-- name 为 a 的组件将被缓存！ -->
 </component>
</keep-alive>可以保留它的状态或避免重新渲染

<keep-alive exclude="a">
 <component>
  <!-- 除了 name 为 a 的组件都将被缓存！ -->
 </component>
</keep-alive>可以保留它的状态或避免重新渲染

遇见 vue-router

router-view 也是一个组件，如果直接被包在 keep-alive 里面，所有路径匹配到的视图组件都会被缓存：

<keep-alive>
  <router-view>
    <!-- 所有路径匹配到的视图组件都会被缓存！ -->
  </router-view>
</keep-alive>

然而产品汪总是要改需求，拦都拦不住...

问题

如果只想 router-view 里面某个组件被缓存，怎么办？

使用 include/exclude
增加 router.meta 属性

使用 include/exclude

// 组件 a
export default {
 name: 'a',
 data () {
  return {}
 }
}

<keep-alive include="a">
  <router-view>
    <!-- 只有路径匹配到的视图 a 组件会被缓存！ -->
  </router-view>
</keep-alive>

exclude 例子类似。

缺点：需要知道组件的 name，项目复杂的时候不是很好的选择

增加 router.meta 属性

// routes 配置
export default [
 {
  path: '/',
  name: 'home',
  component: Home,
  meta: {
   keepAlive: true // 需要被缓存
  }
 }, {
  path: '/:id',
  name: 'edit',
  component: Edit,
  meta: {
   keepAlive: false // 不需要被缓存
  }
 }
]

<keep-alive>
  <router-view v-if="$route.meta.keepAlive">
    <!-- 这里是会被缓存的视图组件，比如 Home！ -->
  </router-view>
</keep-alive>

<router-view v-if="!$route.meta.keepAlive">
  <!-- 这里是不被缓存的视图组件，比如 Edit！ -->
</router-view>

优点：不需要例举出需要被缓存组件名称

【加盐】使用 router.meta 拓展

假设这里有 3 个路由： A、B、C。

需求：

默认显示 A
B 跳到 A，A 不刷新
C 跳到 A，A 刷新

实现方式

在 A 路由里面设置 meta 属性：

{
  path: '/',
  name: 'A',
  component: A,
  meta: {
    keepAlive: true // 需要被缓存
  }
}

在 B 组件里面设置 beforeRouteLeave：

export default {
  data() {
    return {};
  },
  methods: {},
  beforeRouteLeave(to, from, next) {
     // 设置下一个路由的 meta
    to.meta.keepAlive = true; // 让 A 缓存，即不刷新
    next();
  }
};

在 C 组件里面设置 beforeRouteLeave：

export default {
  data() {
    return {};
  },
  methods: {},
  beforeRouteLeave(to, from, next) {
    // 设置下一个路由的 meta
    to.meta.keepAlive = false; // 让 A 不缓存，即刷新
    next();
  }
};

这样便能实现 B 回到 A，A 不刷新；而 C 回到 A 则刷新。

总结

路由大法不错，不需要关心哪个页面跳转过来的，只要 router.go(-1) 就能回去，不需要额外参数。

然而在非单页应用的时候，keep-alive 并不能有效的缓存了= =

参考

issues#811
vue#keep-alive
vue2.0 keep-alive最佳实践

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# vue # keep # alive # vue-router # keep-alive # router # vue3中keep-alive和vue-router的结合使用方式 # keep-Alive搭配vue-router实现缓存页面效果的示例代码 # 在移动端使用vue-router和keep-alive的方法示例 # Vue Router 配合 keep-alive 不生效的问 # 不需要 # 将被 # 跳到 # 很好 # 就能 # 也很 # 只想 # 跳转 # 不被 # 便能 # 大家多多 # 即不 # 加盐 # 正则表达式 # ul # li # js # props # include # exclude

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：中考报名网站入口湖南中考报名系统官网地址

下一篇：中国好建站模板推荐与建站价格解析_专业方案指南

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：中考报名网站入口湖南中考报名系统官网地址

下一篇：中国好建站模板推荐与建站价格解析_专业方案指南