likes
comments
collection
share

KeepAlive使用技巧，使用路由路径作为缓存key

作者站长头像
站长
· 阅读数 27

KeepAlive

先简单介绍一下这个组件，它的功能就是缓存路由，它还有两个很重要的属性include和exclude，一个用来设置需要缓存的组件，一个用来设置排除缓存的组件，通过这个组件，我们可以很轻易在vue中实现路由缓存的功能。

include和exclude都是传递一个组件名的数组，在选项式模式下，我们可以通过name属性来设置组件名，组合式或者说<script setup>模式下，组件名默认情况下是文件名，在vue3.3后，也可以通过defineOptions设置组件名。

使用组件名作为缓存key的问题

正常情况

大多数情况下，我们使用KeepAlive的include属性来实现，把需要缓存的组件名添加进去，不需要的删除，在一个路由对应一个组件的情况下，这是没有任何问题的。

// router.ts
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/home',
      name: 'home',
      component: () => import('../views/HomeView.vue')
    },
    {
      path: '/about',
      name: 'about',
      component: () => import('../views/AboutView.vue')
    }
  ]
})

// app.vue
<script setup lang="ts">
import { ref } from 'vue'
import { RouterView } from 'vue-router'

const list = ref(['HomeView', 'AboutView'])
function clearCache(name: string) {
  const index = list.indexOf(name)
  if (index !== -1) {
    list.splice(index, 1)
  }
}
function addCache(name: string) {
  const index = list.indexOf(name)
  if (index === -1) {
    list.push(name)
  }
}
</script>

<template>
  <button @click="clearCache('HomeView')">清除home的缓存</button>
  <button @click="clearCache('AboutView')">清除about的缓存</button>
  <button @click="addCache('HomeView')">添加home的缓存</button>
  <button @click="addCache('AboutView')">添加about的缓存</button>
  <RouterView v-slot="{ Component }">
    <KeepAlive :include="list">
      <component :is="Component" />
    </KeepAlive>
  </RouterView>
</template>

KeepAlive使用技巧，使用路由路径作为缓存key

使用同一个组件但不同路由出现的问题

有时候我们需要对路由做拼接，并且仍然保留缓存的功能，如：/page/1或者/page/?id=1&type=2这些类型的路由，可以看到，由于keepalive使用的是组件名，导致同一个组件不同路由只能一起删除或者添加

// router.ts
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/page/:id',
      name: 'page',
      component: () => import('../views/PageView.vue')
    }
  ]
})

// app.vue
<script setup lang="ts">
import { ref } from 'vue'
import { RouterView, useRouter } from 'vue-router'

const router = useRouter()

const list = ref(['PageView'])
function clearCache(name: string) {
  const index = list.value.indexOf(name)
  if (index !== -1) {
    list.value.splice(index, 1)
  }
}
function addCache(name: string) {
  const index = list.value.indexOf(name)
  if (index === -1) {
    list.value.push(name)
  }
}
function routerToPage(id: number) {
  router.push('/page/' + id)
}
</script>

<template>
  <button @click="routerToPage(1)">跳转到page 1</button>
  <button @click="routerToPage(2)">跳转到page 2</button>
  <button @click="clearCache('PageView')">清除page的缓存</button>
  <button @click="addCache('PageView')">添加page的缓存</button>
  <RouterView v-slot="{ Component, route }">
    <KeepAlive :include="list">
      <component :is="Component" :key="route.fullPath" />
    </KeepAlive>
  </RouterView>
</template>

KeepAlive使用技巧，使用路由路径作为缓存key

解决方法

这种情况下，我们不能再使用组件名作为缓存的key，而是使用路由路径，这样无论是/page/1还是/page/?id=1&type=2都能单独缓存。

但是组件名只能有一个，所以我们需要对组件外包一层，以达到更改组件名的方法，可以使用vue的h函数来实现。 首先让我们编写一个函数实现动态更组件名，然后将它传递给component组件。

<script setup lang="ts">
import { h, ref, type Component } from 'vue'
import { RouterView, useRouter } from 'vue-router'

const router = useRouter()

const list = ref(['/page/1', '/page/2'])
function clearCache(name: string) {
  const index = list.value.indexOf(name)
  if (index !== -1) {
    list.value.splice(index, 1)
  }
}
function addCache(name: string) {
  const index = list.value.indexOf(name)
  if (index === -1) {
    list.value.push(name)
  }
}
function routerToPage(id: number) {
  router.push('/page/' + id)
}

const componentMap = new Map()
function renameComponent(name: string, component: Component) {
  if (componentMap.has(name)) {
    return componentMap.get(name)
  }
  const newComponentObj = {
    name,
    render() {
      return h(component)
    }
  }
  const newComponent = h(newComponentObj)
  componentMap.set(name, newComponent)
  return newComponent
}
</script>

<template>
  <button @click="routerToPage(1)">跳转到page 1</button>
  <button @click="routerToPage(2)">跳转到page 2</button>
  <button @click="clearCache('/page/1')">清除page 1的缓存</button>
  <button @click="clearCache('/page/2')">清除page 2的缓存</button>
  <button @click="addCache('/page/1')">添加page 1的缓存</button>
  <button @click="addCache('/page/2')">添加page 2的缓存</button>
  <RouterView v-slot="{ Component, route }">
    <KeepAlive :include="list" v-if="route.path !== '/'">
      <component :is="renameComponent(route.fullPath, Component)" :key="route.fullPath" />
    </KeepAlive>
  </RouterView>
</template>

KeepAlive使用技巧，使用路由路径作为缓存key

注意事项

在使用/page/1这种类型的时候，上面的代码是能正常使用的，但是使用/page/?id=1&type=2这种类型的路径，会发现如果路径上出现了逗号之类的就会失去缓存例如/page/?id=1,2

// route.ts
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/page',
      name: 'page',
      component: () => import('../views/PageView.vue')
    }
  ]
})

// app.vue
<script setup lang="ts">
import { h, ref, type Component } from 'vue'
import { RouterView, useRouter } from 'vue-router'

const router = useRouter()

const list = ref(['/page/?id=1,1', '/page/?id=2,2'])
function clearCache(name: string) {
  const index = list.value.indexOf(name)
  if (index !== -1) {
    list.value.splice(index, 1)
  }
}
function addCache(name: string) {
  const index = list.value.indexOf(name)
  if (index === -1) {
    list.value.push(name)
  }
}
function routerToPage(id: number) {
  router.push(`/page/?id=${id},${id}`)
}

const componentMap = new Map()
function renameComponent(name: string, component: Component) {
  if (componentMap.has(name)) {
    return componentMap.get(name)
  }
  const newComponentObj = {
    name,
    render() {
      return h(component)
    }
  }
  const newComponent = h(newComponentObj)
  componentMap.set(name, newComponent)
  return newComponent
}
</script>

<template>
  <button @click="routerToPage(1)">跳转到page 1</button>
  <button @click="routerToPage(2)">跳转到page 2</button>
  <button @click="clearCache('/page/?id=1,1')">清除page 1的缓存</button>
  <button @click="clearCache('/page/?id=2,2')">清除page 2的缓存</button>
  <button @click="addCache('/page/?id=1,1')">添加page 1的缓存</button>
  <button @click="addCache('/page/?id=2,2')">添加page 2的缓存</button>
  <RouterView v-slot="{ Component, route }">
    <KeepAlive :include="list" v-if="route.path !== '/'">
      <component :is="renameComponent(route.fullPath, Component)" :key="route.fullPath" />
    </KeepAlive>
  </RouterView>
</template>

KeepAlive使用技巧，使用路由路径作为缓存key 出现这个问题大概率是因为keepalive无法处理特殊字符逗号之类的，所以我们可以把路径使用encodeURIComponent转码一下

// app.vue
<script setup lang="ts">
import { h, ref, type Component } from 'vue'
import { RouterView, useRouter } from 'vue-router'

const router = useRouter()

const list = ref([encodeStr('/page/?id=1,1'), encodeStr('/page/?id=2,2')])
function clearCache(name: string) {
  name = encodeStr(name)
  const index = list.value.indexOf(name)
  if (index !== -1) {
    list.value.splice(index, 1)
  }
}
function addCache(name: string) {
  name = encodeStr(name)
  const index = list.value.indexOf(name)
  if (index === -1) {
    list.value.push(name)
  }
}
function routerToPage(id: number) {
  router.push(`/page/?id=${id},${id}`)
}

function encodeStr(value: string) {
  // 对特殊字符转码
  const isSpecial = /[`~!@#$%^&*()_\-+=<>?:"{}|,./;'\\[\]·！#￥（——）：；“”‘、，|《。》？、【】[\]]/
  let result = ''
  for (let i = 0; i < value.length; i++) {
    if (isSpecial.test(value[i])) {
      result += encodeURIComponent(value[i])
    } else {
      result += value[i]
    }
  }
  return result
}

const componentMap = new Map()
function renameComponent(name: string, component: Component) {
  name = encodeStr(name)
  if (componentMap.has(name)) {
    return componentMap.get(name)
  }
  const newComponentObj = {
    name,
    render() {
      return h(component)
    }
  }
  const newComponent = h(newComponentObj)
  componentMap.set(name, newComponent)
  return newComponent
}
</script>

<template>
  <button @click="routerToPage(1)">跳转到page 1</button>
  <button @click="routerToPage(2)">跳转到page 2</button>
  <button @click="clearCache('/page/?id=1,1')">清除page 1的缓存</button>
  <button @click="clearCache('/page/?id=2,2')">清除page 2的缓存</button>
  <button @click="addCache('/page/?id=1,1')">添加page 1的缓存</button>
  <button @click="addCache('/page/?id=2,2')">添加page 2的缓存</button>
  <RouterView v-slot="{ Component, route }">
    <KeepAlive :include="list" v-if="route.path !== '/'">
      <component :is="renameComponent(route.fullPath, Component)" :key="route.fullPath" />
    </KeepAlive>
  </RouterView>
</template>

KeepAlive使用技巧，使用路由路径作为缓存key 結果非常成功，如果看完后觉得有不好的地方或者有更好更简单的方法希望可以留言一下。

转载自:https://juejin.cn/post/7367631026250530855
评论
请登录