<keep-alive include="组件名称,多个组件之间用英文的逗号分隔"> <componentis="组件名称"></component> </keep-alive> include表示:指定需要被缓存的组件,多个组件之间用英文的逗号分隔 keep-alive的exclude属性 1 2 3 <keep-alive exclude="组件名称,多个组件之间用英文的逗号分隔"> <componentis="组件名称">...
<!-- 1. component 标签是 vue 内置的,作用:组件的占位符 --> <!-- 2. is 属性的值,表示要渲染的组件的名字 --> <!-- 3. is 属性的值,应该是组件在 components 节点下的注册名称 --> <!-- keep-alive 会把内部的组件进行缓存,而不是销毁组件 --> <!-- 在使用 keep-alive 的时候,可以通过...
1. function pruneCache (keepAliveInstance, filter) {2. const { cache, keys, _vnode } = keepAliveInstance3. for (const key in cache) {4. const cachedNode = cache[key]5. if (cachedNode) {6. const name = getComponentName(cachedNode.componentOptions)7. if (name && !filter(name)) {...
关于keep-alive的最强大缓存功能是在render函数中实现 首先获取组件的key值: const key = vnode.key == null? componentOptions.Ctor.cid + (componentOptions.tag ? `::${componentOptions.tag}` : '') : vnode.key 拿到key值后去this.cache对象中去寻找是否有该值,如果有则表示该组件有缓存,即命中缓存,...
('./views/keep-alive/index.vue'),meta:{deepth:0.5// 定义路由的层级}},{path:'/list',name:'list',component:()=>import('./views/keep-alive/list.vue'),meta:{deepth:1keepAlive:true//需要被缓存}},{path:'/detail',name:'detail',component:()=>import('./views/keep-alive/detail.vue'...
transition和keep-alive现在必须通过v-slotAPI 在 RouterView 内部使用,下面是一个案例: <router-view v-slot="{ Component,route }"><transition><keep-alive><component :is="Component" v-if="route.meta.keepalive==true" :key="route.path" /></keep-alive><component :is="Component" v-if="route...
//index.vue<template><!-- 基本 --><keep-alive:include='[]':exclude='[]':max='[]'><component:is="view"></component></keep-alive></template> 内置props 组件内置了三个props include:字符串或正则表达式。只有名称匹配的组件会被缓存
设置meta,说明:需要进行缓存的组件进行设置keepAlive: true 不需要缓存的不设置或者设置keepAlive: false 代码: { path:'/searchResult', name:'searchResult', component:searchResult, meta: { keepAlive:true } }, 1. 2. 3. 4. 5. 6. 7.
component: Home } AI代码助手复制代码 将home的路由规则钟的meta添加keepAlive属性为true,也就是当前路由组件要进行缓存 keep-alive代码可以结合v-if进行包裹,如果meta中的keepAlive为true进行缓存,否侧不进行缓存,这样可以更灵活一些 <keep-alive><router-viewv-if="$route.meta.keepAlive"/></keep-alive><rout...
设置meta,说明:需要进行缓存的组件进行设置keepAlive: true 不需要缓存的不设置或者设置keepAlive: false 代码: { path: '/searchResult', name: 'searchResult', component: searchResult, meta: { keepAlive: true } }, 1. 2. 3. 4. 5. 6. ...