banner
NEWS LETTER

keep-alive 与 router-view

Scroll down
Avatar
白云苍狗
I`m
  • Residence:
    Mars
  • City:
    WuHan
  • Age:
    18

12/07

08:07

白云苍狗

keep-alive 用于缓存不活动的组件实例,router-view 一个 functional 组件,渲染路径匹配到的视图组件。这里对两者结合使用时遇到几种情况做个简单记录

keep-alive

属性:

  • include - 字符串或正则表达式。只有名称匹配的组件会被缓存。
  • exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。
  • max - 数字。最多可以缓存多少组件实例。

缓存组件名为 a,b 的组件,排除组成名为 c 的

<keep-alive :include="['a','b']" :exclude="['c']" :max="5">
<component :is="view"></component>
</keep-alive>

结合router-view使用

如果直接被包在 keep-alive 里面,所有路径匹配到的视图组件都会被缓存

<keep-alive>
<router-view></router-view>
</keep-alive>

然后实现总是会有其他不同的需求的

  • 比如只缓存某些组件
  • 或者相同路由不同参数需要分开缓存

缓存部分组件

指定只缓存部分组件,相对来说比较简单。 可以在 router.meta 中增加需要缓存标识,然后使用
include 指定需要缓存组件

<template>
<keep-alive :include="include">
<router-view />
</keep-alive>
</template>

<script>
export default {
data() {
return {
include: []
}
},
watch: {
$route(route) {
let { meta } = route
if (meta.cache && !this.include.includes(meta.name)) {
this.include.push(meta.name)
}
}
}
}
</script>

// route 路由数组
[{
path: 'home',
name: "home",
meta:{
name:'组件名称',
cache:true //设置需要缓存
},
component: () => import('@/views/home')
},{
path: '/login',
name: 'login',
meta:{
name:'组件名称',
cache:true
},
component: () => import('@/views/login'),
}]

这种方式需要知道组件的 name,当项目较大时候,给路由匹配上对应组件 name 也是件挺繁琐的事。改进一下使用两个 router-view 组件,一个用 keep-alive 包裹进行缓存,一个不缓存。这样就不需要例举出需要被缓存组件名称

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

<router-view v-if="!$route.meta.cache" />

相同路由不同参数

当有一个路由为 /params/:id ,打开 /params/1、/params/2 、/params/xxx 正常情况下 vue 会对其进行复用,但是有些时候我们需要对其分开缓存。 这个时候可以给 router-view 指定 key

<keep-alive>
<router-view :key="$route.fullPath"></router-view>
</keep-alive>

$route.fullPath : 完成解析后的 URL,包含查询参数和 hash 的完整路径。所以每个路径都是唯一的,当然也可以指定其他的值,只需要保持唯一就可以了

© 2022- 2022 · 白云苍狗
博客已萌萌哒运行: