路由的缓存

路由缓存是 Vue组件优化的一个重要方法

为什么实现路由缓存?

  为了 组件间 相互切换不会重复加载数据,影响用户体验,我们通常需要将组件的数组实现缓存,当我们点过来,在点的时候会再次发送 ajax,想让它发送之后把数据存起来。

  我们需要,当我点击的时候直接出来

<keep-alive>
<router-view></router-view>
</keep-alive>
步骤一:路由的写法
{
path:"/find/nan",
name:"nan",
component:Nan,
meta:{
keepAlive:true
}
},

为true 这个组件就缓存,为false 就不缓存

步骤i二:app.vue中

  使用 <keep-alive></keep-alive> 标签将<router-view></router-view> 包裹起来。

keep-alive 是什么?

  包裹动态组件时,会缓存不活动的组件实例,而不是销毁他们,他自身不会渲染一个 dom 元素 也不会出现在父组件中。

作者:晋飞翔
手机号(微信同步):17812718961
希望本篇文章 能给正在学习 前端的朋友 或 以及工作的朋友 带来收获 不喜勿喷 如有建议 多多提议 谢谢!!!

vue学习指南:第十三篇(详细) - Vue的 路由 第三篇 ( 路由的缓存 )的更多相关文章

  1. vue学习指南:第三篇(详细) - vue的生命周期

    今天小编给大家详细讲解一下 vue 的生命周期.希望大家多多指教,哪里有遗漏的地方,也请大家指点出来 谢谢. 一. 怎么理解 Vue 的生命周期的? 生命周期:从无到有,到到无的一个过程.Vue的生命 ...

  2. vue学习指南:第十一篇(详细) - Vue的 路由 第一篇 ( router )

    一.路由的配置 路由  vue-router 1. 什么是路由? 路由相当于一个配置对象 路由:就是我们通过不同的url访问不同的内容,通过angular.js 可以实现多视图的单页,现在流行的单页面 ...

  3. vue学习指南:第十二篇(详细) - Vue的 路由 第二篇 ( 路由按需加载(懒加载))

    各位朋友 因 最近工作繁忙,小编停更了一段时间,快过年了,小编祝愿 大家 事业有成 学业有成 快乐健康 2020开心过好每一天.从今天开始 我会抽时间把 Vue 的知识点补充完整,以及后期会带给大家更 ...

  4. vue学习指南:第十四篇(详细) - Vue的 路由 第四篇 ( 路由的导航守卫 )

    导航守卫 一.全局导航守卫 1. 全局导航守卫,把方法给 router,只要路由发生改变跳转都会触发这个函数 2. 每个路由 都有一个 meta 3. 全局导航守卫分两种: 1. 全局前置导航守卫:路 ...

  5. vue学习指南:第二篇(详细Vue基础) - Vue的指令

    一. Vue 的介绍 1. vue是一个 mvvm 的框架.(面试官经常会问的),angular 是 mvc的框架. 2. vm 是 vum 的实例,这个实例存在计算机内存中,主要干两件大事: 1. ...

  6. vue学习指南:第十篇(详细) - Vue的 动画

    Vue 提供了一些不同的过度效果,主要根 v-if v-show 动态组件 1. Vue给动画分了6个过程,在css中,扮演6个类, 1.  .v-enter定义动画的开始状态 2.  .v-ente ...

  7. vue学习指南:第七篇(详细) - Vue的 组件通信

    Vue 的 父传子 子传父 一.父组件向子组件传值: 父传子 把需要的数据 传递给 子组件,以数据绑定(v-bind)的形式,传递到子组件内部,供子组件使用  缩写是(:) 1.创建子组件,在src/ ...

  8. vue学习指南:第六篇(详细) - Vue的组件 component

    1. 什么是组件?有两种解释 1. 第一种解释: 什么是组件? 1. 组件是 vue 中的一个可复用的实例,所以new Vue() 是vue中最大的那个组件(根组件),有名字,使用的时候以单标签或双标 ...

  9. vue学习指南:第四篇(详细) - vue的 :class 和 :style

    1. :class = “a” 说明 vue 中有个叫 a 的属性 这个标签的class 就是 a的值 2. :class = “{ active:isactive }” Active的存在取决于 i ...

随机推荐

  1. java 虚拟机原理

    什么是JVM JVM是Java Virtual Machine(Java虚拟机)的缩写,是一个虚构出来的计算机,它屏蔽了与具体操作系统平台相关的信息,使得Java程序只需生成在Java虚拟机上运行的目 ...

  2. PL/SQL不安装Oracle连接,Oracle instantclient安装

    ================================ ©Copyright 蕃薯耀 2020-01-07 https://www.cnblogs.com/fanshuyao/ 第一步: 下 ...

  3. dir()和vars()的区别就是

    ------------恢复内容开始------------ dir()只打印属性(属性,属性......) 而vars()则打印属性与属性的值(属性:属性值......) >> a='a ...

  4. Excel开启宏以后保存是会提示安全警告,怎么取消

    如果你用的(应该)是2007以上版本的话 请点左上角的EXCEL图标,EXCEL选项,信任中心,信任中心设置,个人信息选项,保存时从文件属性中删除个人信息前面的对号取消.确定就可以了. (补充:如果你 ...

  5. Android_向用户发送短信

    一段代码,用的时候copy就行 记得在manifest里声明send-sms和read-sms权限 public class SendMsgActivity extends AppCompatActi ...

  6. 刷题79. Word Search

    一.题目说明 题目79. Word Search,给定一个由字符组成的矩阵,从矩阵中查找一个字符串是否存在.可以连续横.纵找.不能重复使用,难度是Medium. 二.我的解答 惭愧,我写了很久总是有问 ...

  7. MySQL和MariaDB安全初始化

    通过yum安装mysql(5.x)后往往需要进行一些安全类的初始化设置: 安装完数据库后执行mysql_secure_installation命令,会出现安全相关的交互界面. 按提示操作.

  8. jquery ajax简单书写

    占时无法显示该内容,请稍后再试 $.ajax({ url:"http://v.juhe.cn/weather/index", data:{cityname:"苏州&quo ...

  9. 在写论文的参考文献时,有的段落空格很大,有的段落则正常,原因及解决方法(wps)

    下图是一段原始的参考文献,可以看出第一行的空格很大: 原因: 当一个词占不下时,自动将单词移动到下一行,但是这一行又有很多字符,因此这时,软件会将空闲的位置用空白字符填满.第一行有两个空白字符,因此将 ...

  10. 【新人赛】阿里云恶意程序检测 -- 实践记录10.20 - 数据预处理 / 训练数据分析 / TF-IDF模型调参

    Colab连接与数据预处理 Colab连接方法见上一篇博客 数据预处理: import pandas as pd import pickle import numpy as np # 训练数据和测试数 ...