Vue 3中的 路由守卫：全面解析与使用教程

什么是 Vue 路由缓存？

Vue 路由缓存是通过 Vue 的内置组件 <keep-alive> 实现的，它可以缓存组件的状态和 DOM 节点，避免在组件切换时销毁并重新创建组件。当应用中存在频繁切换的页面或需要保存表单、滚动等状态时，使用路由缓存可以显著提高应用性能并提升用户体验。

在实际场景中，路由缓存允许开发者对某些路由页面进行缓存，而不是每次切换时都重新加载数据或重新渲染页面。

为什么需要路由缓存？

1. 提升性能：缓存页面可以避免组件重复加载数据和重新渲染，减少不必要的网络请求和计算。
2. 状态保存：某些页面（如表单页、滚动页面等）需要保存当前的状态，缓存可以防止状态丢失。
3. 优化用户体验：避免页面频繁切换导致的卡顿或页面刷新，提供更加流畅的用户体验。

Vue 路由缓存的核心概念

Vue 路由缓存依赖 <keep-alive> 组件来实现。<keep-alive> 是 Vue 的一个抽象组件，可以缓存活动组件的状态。它通过缓存已经渲染的组件来避免重复渲染和销毁，从而提升应用性能。

基础使用：路由缓存的实现

在 Vue 中，要实现路由缓存非常简单。只需要将路由视图 <router-view> 包裹在 <keep-alive> 组件中即可：

<template>
  <div id="app">
    <keep-alive>
      <router-view />
    </keep-alive>
  </div>
</template>

通过这种方式，所有的路由组件都会被缓存。当你从一个路由跳转到另一个路由时，之前的路由组件不会被销毁，而是保持其状态。

控制缓存的组件

有时候，我们可能只希望缓存特定的路由页面，而不是所有页面。可以通过 <keep-alive> 的 include 和 exclude 属性来控制需要缓存的组件。

使用 include 缓存指定组件

include 接受一个字符串或正则表达式，表示需要缓存的组件名称。

<keep-alive include="Home,About">
  <router-view />
</keep-alive>

在这个示例中，只有 Home 和 About 路由组件会被缓存，其他路由组件不会被缓存。

使用 exclude 排除不缓存的组件

exclude 和 include 类似，它接受一个字符串或正则表达式，用来排除不需要缓存的组件。

<keep-alive exclude="Login">
  <router-view />
</keep-alive>

在这个示例中，所有路由组件都会被缓存，除了 Login 组件。

动态组件名称匹配

要确保缓存正确生效，组件名称必须正确设置。在 Vue 中，组件的名称通过 name 属性定义：

export default {
  name: 'Home'
};

路由缓存与参数

当路由组件的参数发生变化时（例如通过不同的 ID 访问同一组件），默认情况下，<keep-alive> 缓存的组件不会重新渲染。为了处理这种情况，你可以通过观察 $route 对象来手动更新组件。

<template>
  <div>
    <h1>当前ID：{{ id }}</h1>
  </div>
</template>

<script>
export default {
  computed: {
    id() {
      return this.$route.params.id;
    }
  },
  watch: {
    $route(to, from) {
      if (to.params.id !== from.params.id) {
        // 手动更新组件逻辑
        this.fetchData();
      }
    }
  },
  methods: {
    fetchData() {
      // 请求新数据
    }
  }
};
</script>

在这个示例中，当路由参数 id 发生变化时，watch 会监听 $route 的变化并触发 fetchData 方法来请求新数据。

路由组件的生命周期

当使用 <keep-alive> 时，路由组件的生命周期钩子会有所变化：

• activated：组件从缓存中激活时触发。
• deactivated：组件被缓存时（切换到其他路由页面）触发。

你可以在这些生命周期钩子中编写逻辑，例如在组件被激活时刷新数据。

export default {
  activated() {
    console.log('组件被激活');
  },
  deactivated() {
    console.log('组件被缓存');
  }
};

示例：缓存部分路由

假设我们有一个应用，有两个需要缓存的路由 Home 和 About，以及一个不需要缓存的 Login 页面。我们可以通过如下方式实现：

const routes = [
  {
    path: '/home',
    component: () => import('@/views/Home.vue'),
    name: 'Home'
  },
  {
    path: '/about',
    component: () => import('@/views/About.vue'),
    name: 'About'
  },
  {
    path: '/login',
    component: () => import('@/views/Login.vue'),
    name: 'Login'
  }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

接着，在主组件中使用 <keep-alive> 并结合 include 和 exclude 控制缓存：

<template>
  <div id="app">
    <keep-alive include="Home,About" exclude="Login">
      <router-view />
    </keep-alive>
  </div>
</template>

这样 Home 和 About 页面会被缓存，而 Login 页面不会缓存。

切换时清除缓存

有时候我们希望在特定情况下清除缓存，例如在用户退出登录时，需要销毁某些路由的缓存。可以通过 $refs 来手动清除缓存的组件：

<template>
  <div id="app">
    <keep-alive ref="keepAlive">
      <router-view />
    </keep-alive>
    <button @click="clearCache">清除缓存</button>
  </div>
</template>

<script>
export default {
  methods: {
    clearCache() {
      this.$refs.keepAlive.cache = {};
      this.$refs.keepAlive.keys = [];
    }
  }
};
</script>

通过这种方式，你可以在特定场景下手动清除路由组件的缓存。

总结

通过使用 Vue 路由缓存，可以显著提升应用的性能和用户体验。使用 <keep-alive> 组件能够轻松地缓存需要的路由页面，减少重复渲染和状态丢失。通过 include 和 exclude 属性，我们可以精确控制哪些路由组件需要缓存，哪些不需要缓存。此外，结合组件的 activated 和 deactivated 生命周期钩子，我们可以在组件激活和缓存时执行特定的逻辑，从而实现更加灵活的状态管理和性能优化。

通过掌握路由缓存的使用方法，开发者可以有效提升 Vue.js 应用的效率，尤其是在处理大型应用时，缓存策略能够大幅减少不必要的资源消耗。