keep-alive可以干什么
- 可以缓存组件的内容,避免重复加载,影响效率
何时使用
- 只要我们希望一个组件的内容,不要重复加载时使用
如何缓存页面
- 在router.js或者router/index.js中
- 在需要缓存的路由上添加meta:{keepAlive:true}
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'home',
component: Home,
meta:{
keepAlive:true//缓存
}
},
{
path:"/products/:kw",
name:"products",
component: ()=>import(/* webpackChunkName: "products" */ '../views/Products.vue'),
props:true,
meta:{
keepAlive:false
}
}
]
const router = new VueRouter({
mode:"history",
routes
})
export default router
注意
meta不能改名!因为meta是路由对象专门定义,用来保存自定义的属性值的配置项
但是keepAlive是自定义的属性,可以改名
在App.vue中
- 如果当前路由需要缓存($router.meta.keepAlive==true),就放在keep-alive包裹的一个router-view中
- 如果当前路由不需要缓存($route.meta.leepAlive==false),就放在keep-alive外的一个router-view上
<template>
<div id="app">
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div>
/*需要缓存的写法*/
<keep-alive>
<router-view v-if="$route.meta.keepAlive"/>
</keep-alive>
/*不需要缓存的写法*/
<router-view v-if="!$route.meta.keepAlive"></router-view>
</div>
</template>
结果
带有keepAlive:true的路由对应的页面,只在首次请求时,渲染一次内容,之后后退,跳转回来,都不再重新渲染内容
问题
虽然是同一个页面,但是有时数据需要缓存,有时数据不需要缓存
比如
假如有一个是商品列表,可以根据关键词,查询商品列表
如果从首页跳转过来,说明用户输入了查询条件,需要更新查询结果
如果从详情页跳转过来,说明用户从商品列表页面调和粗去的,现在又返回商品列表页面,那么应该保留之前的搜索结果