(尚042) vue_缓存路由组件

现在About切换后效果:

值不在了,说明About是个新的,要想值存在,About必须是个老的,旧的,被切换时死亡,在切换时重新创建;

要想不死亡,需要将它缓存起来,怎样缓存呢?

<keep-alive>

<router-view></router-view>

</keep-alive>

=============================================================

缓存路由组件对象

1. 理解

1) 默认情况下, 被切换的路由组件对象会死亡释放, 再次回来时是重新创建的

2) 如果可以缓存路由组件对象, 可以提高用户体验

2. 编码实现

<keep-alive>

<router-view></router-view>   //让router-view 管理的组件保持活着

</keep-alive>

3.代码图片

可以在input框中输入数据来测试.

====================================================================================================================================

应用场景:

列表是从后台获取的(花了很大力气从后台获取过来)

table1和table2来回切换时,用户体验会很差

数据显示要求实时性:(数据显示要求实时性高/低,高意味着要尽快和后台的数据保持一致,比如:股票的实时性最高,不能使用)

原文地址:https://www.cnblogs.com/curedfisher/p/12283500.html

时间: 2024-11-02 15:08:49

(尚042) vue_缓存路由组件的相关文章

(尚043) vue_向路由组件传递数据+vue param和query两种传参方式

效果展示: ============================================================================ 应写成下图这种形式: :id为占位 现在是通过什么路径向路由组件传递数据的? 通过请求参数${message.id}传递的 请求参数有两种: 1).Param 2).Query  (?后面,类似于get) ================================================================

(尚033)Vue_案例_slot(组件间的通信4:slot)

1.组件间的通信4:slot(slot:插槽,就是一个占位) slot用于标签反复使用很多次 1.1理解 此方式用于父组件向子组件传递标签数据, 其他为数据通信 外面组件向里面组件传递标签进去,直接拿我的标签显示数据就行 假如我传递的是数据,我还得映射成标签,才能显示数据 1.2子组件Child.vue 1.3父组件:Parent.vue 注意底下这两个<div>与上面的<slot>是对应关系 ============================================

5.0 路由组件的使用

一.概述 路由器:路由器管理路由; 路由:路由是一种映射关系,一个key对应一个value,key是path,对于后台路由,     value是处理请求的回调函数,对于前台路由value是组件. 说明:1) 官方提供的用来实现 SPA(单个页面) 的 vue 插件2) github: https://github.com/vuejs/vue-router3) 中文文档: http://router.vuejs.org/zh-cn/4) 下载: npm install vue-router --

Hibernate缓存、组件、继承映射

Hibernate缓存.组件.继承映射 三种状态: 临时状态:不受session管理,没有提交到数据库:没有执行sql之前,new对象的时候: 持久化状态:受session管理,提交到数据库:正在执行sql 游离状态:不受session管理,提交到数据库:session关闭后 Cache缓存:会先看看缓存里有没有,有就取出来,没有就到数据库取数据. Session的三个方法:flush.evict.clear 不同session不会共享数据. List与iterator的区别: List是直接到

VUE 路由组件左右滑动切换(移动端)

<template> <div id="headed"> <ul class="tab"> <li> <!-- @click="jump(index) index: 切换颜色 代表切换的路由文件 :class="{'active_color': index==0} 当index等于0的时候显示第一个,index:1 切换排球 --> <div class="body_bo

Linux内核协议栈的socket查找缓存路由机制

是查路由表快呢?还是查socket哈希表快?这不是问题的根本.问题的根本是怎么有效利用这两者,让两者成为合作者而不是竞争者.这是怎么回事?       我们知道,如果一个数据包要到达本地,那么它要经过两次查找过程(暂时不考虑conntrack):IP层查找路由和传输层查找socket.怎么合并这两者.       Linux内核协议栈采用了一种办法:在socket中增加一个dst字段作为缓存路由的手段,skb在查找路由之前首先查找socket,找到的话,就将缓存的dst设置到skb,接下来在查找

对jquery的ajax进行二次封装以及ajax缓存代理组件:AjaxCache

虽然jquery的较新的api已经很好用了, 但是在实际工作还是有做二次封装的必要,好处有:1,二次封装后的API更加简洁,更符合个人的使用习惯:2,可以对ajax操作做一些统一处理,比如追加随机数或其它参数.同时在工作中,我们还会发现,有一些ajax请求的数据,对实时性要求不高,即使我们把第一次请求到的这些数据缓存起来,然后当相同请求再次发起时直接拿之前缓存的数据返回也不会对相关功能有影响,通过这种手工的缓存控制,减少了ajax请求,多多少少也能帮助我们提高网页的性能.本文介绍我自己关于这两方

vue-router之路由钩子(组件内路由钩子必须在路由组件调用,子组件没用)

模式 vue-router中的模式选项主要在router实例化的时候进行定义的,如下 const router = new VueRouter({ mode: 'history', // 两种类型history 还有 hash routes: routes // 可以缩写成routes }) 有两种模式可供选择,history 和 hash,大致对比一下, 模式 优点 缺点 hash 使用简单.无需后台支持 在url中以hash形式存在,不会传到后台 history 地址明确,便于理解和后台处理

DjangoRestFramework的视图组件和路由组件

一视图组件 restframework可以轻松完成对某个数据的增删改查的目的,在继承viewsets.ModelViewset后,只需要配置数据管理对象和序列化器即可, class BookModelView(viewsets.ModelViewSet): queryset = models.Book.objects.all() serializer_class = BookSerializer 上面的方法是直接继承restframework提供的方法来实现对数据的增删改查的目的,根据前端提交请