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

问题

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

比如

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值