Vue3缓存页面keep-alive及路由统一处理详解

简介

在Vue3中，使用keep-alive组件可以缓存页面，使得在切换页面的时候不需要重复渲染已有的页面元素，从而提高页面性能和用户体验。同时，使用路由统一处理可以更好地管理页面路由及其对应的组件，使得页面结构更加清晰，维护起来也更加方便。

实现 keep-alive 方法

使用keep-alive组件需要在页面中引入<router-view>作为占位符，并在需要缓存的页面元素外部包裹<keep-alive>标签，示例如下：

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

在上述示例中，通过判断$route对象的meta.keepAlive属性，将需要缓存的页面组件放置在<keep-alive>标签内，其余页面组件直接通过<router-view>展示。

要使得上述示例能够正常工作，还需要在路由页面组件中设置meta.keepAlive属性。例如，将Home页面设置为需要缓存的页面，示例代码如下：

const routes = [
  { path: '/', component: Home, meta: { keepAlive: true } },
  { path: '/about', component: About, meta: { keepAlive: false } },
  // ...
]

实现路由统一处理

在Vue3中，可以使用createRouter函数来创建路由实例，并使用routes属性来设置路由路径及其对应的组件。同时，我们还可以通过router.beforeEach和router.afterEach方法来实现路由的跳转前、后的一些公共逻辑处理，例如权限认证、错误提示等。

示例代码如下：

import { createRouter, createWebHistory } from 'vue-router'
// 导入相关路由组件
import Home from './views/Home.vue'
import About from './views/About.vue'
// ...

const routes = [
  { path: '/', component: Home, meta: { keepAlive: true } },
  { path: '/about', component: About, meta: { keepAlive: false } },
  // ...
]

// 创建路由实例
const router = createRouter({
  history: createWebHistory(),
  routes
})

// 路由跳转前的处理
router.beforeEach((to, from, next) => {
  // ...
})

// 路由跳转后的处理
router.afterEach((to, from) => {
  // ...
})

export default router

在上述示例中，使用createRouter函数创建路由实例，通过routes属性设置路由路径及其对应的组件，在beforeEach和afterEach方法中实现公共的路由处理逻辑。

示例说明

示例一：使用keep-alive缓存页面

假设我们有一个页面需要在多次跳转和切换后能够快速展示，例如在Home页面中添加一个轮播图组件。我们可以在Home页面中设置meta.keepAlive为true，同时在<router-view>外部包裹<keep-alive>标签。示例代码如下：

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

<script>
export default {
  name: 'App',
  data() {
    return {
      // ...
    }
  },
  // ...
}
</script>

在路由组件中，需要设置相应的meta.keepAlive属性：

const routes = [
  { path: '/', component: Home, meta: { keepAlive: true } },
  { path: '/about', component: About, meta: { keepAlive: false } },
  // ...
]

示例二：使用路由统一处理

假设我们在路由跳转前需要增加权限认证、错误提示等公共处理逻辑，我们可以在router.beforeEach方法中实现。例如，在本地存储中设置一个isLogin标志变量，若用户未登录则禁止进入需要权限的页面，示例代码如下：

// 路由跳转前的处理
router.beforeEach((to, from, next) => {
  // 判断是否需要权限认证
  if (to.meta.auth) {
    const isLogin = localStorage.getItem('isLogin')
    // 如果用户未登录，则跳转到登录页面
    if (!isLogin) {
      next('/login')
    } else {
      next()
    }
  } else {
    next()
  }
})

在路由跳转后，也可以进行一些公共处理逻辑，例如记录用户访问时间及页面路径等信息：

// 路由跳转后的处理
router.afterEach((to, from) => {
  const timestamp = new Date().getTime()
  const pathname = window.location.pathname
  localStorage.setItem('lastVisitTime', timestamp)
  localStorage.setItem('lastVisitPath', pathname)
})

这样，我们就能够实现路由跳转前、后的公共处理逻辑，并更好地管理页面路由及其组件。