keep-alive路由缓存

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的路由对应的页面,只在首次请求时,渲染一次内容,之后后退,跳转回来,都不再重新渲染内容

问题

虽然是同一个页面,但是有时数据需要缓存,有时数据不需要缓存

比如

假如有一个是商品列表,可以根据关键词,查询商品列表
如果从首页跳转过来,说明用户输入了查询条件,需要更新查询结果
如果从详情页跳转过来,说明用户从商品列表页面调和粗去的,现在又返回商品列表页面,那么应该保留之前的搜索结果