vue学习指南:第十三篇(详细) - Vue的 路由 第三篇 ( 路由的缓存 )
路由的缓存
路由缓存是 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的 路由 第三篇 ( 路由的缓存 )的更多相关文章
- vue学习指南:第三篇(详细) - vue的生命周期
今天小编给大家详细讲解一下 vue 的生命周期.希望大家多多指教,哪里有遗漏的地方,也请大家指点出来 谢谢. 一. 怎么理解 Vue 的生命周期的? 生命周期:从无到有,到到无的一个过程.Vue的生命 ...
- vue学习指南:第十一篇(详细) - Vue的 路由 第一篇 ( router )
一.路由的配置 路由 vue-router 1. 什么是路由? 路由相当于一个配置对象 路由:就是我们通过不同的url访问不同的内容,通过angular.js 可以实现多视图的单页,现在流行的单页面 ...
- vue学习指南:第十二篇(详细) - Vue的 路由 第二篇 ( 路由按需加载(懒加载))
各位朋友 因 最近工作繁忙,小编停更了一段时间,快过年了,小编祝愿 大家 事业有成 学业有成 快乐健康 2020开心过好每一天.从今天开始 我会抽时间把 Vue 的知识点补充完整,以及后期会带给大家更 ...
- vue学习指南:第十四篇(详细) - Vue的 路由 第四篇 ( 路由的导航守卫 )
导航守卫 一.全局导航守卫 1. 全局导航守卫,把方法给 router,只要路由发生改变跳转都会触发这个函数 2. 每个路由 都有一个 meta 3. 全局导航守卫分两种: 1. 全局前置导航守卫:路 ...
- vue学习指南:第二篇(详细Vue基础) - Vue的指令
一. Vue 的介绍 1. vue是一个 mvvm 的框架.(面试官经常会问的),angular 是 mvc的框架. 2. vm 是 vum 的实例,这个实例存在计算机内存中,主要干两件大事: 1. ...
- vue学习指南:第十篇(详细) - Vue的 动画
Vue 提供了一些不同的过度效果,主要根 v-if v-show 动态组件 1. Vue给动画分了6个过程,在css中,扮演6个类, 1. .v-enter定义动画的开始状态 2. .v-ente ...
- vue学习指南:第七篇(详细) - Vue的 组件通信
Vue 的 父传子 子传父 一.父组件向子组件传值: 父传子 把需要的数据 传递给 子组件,以数据绑定(v-bind)的形式,传递到子组件内部,供子组件使用 缩写是(:) 1.创建子组件,在src/ ...
- vue学习指南:第六篇(详细) - Vue的组件 component
1. 什么是组件?有两种解释 1. 第一种解释: 什么是组件? 1. 组件是 vue 中的一个可复用的实例,所以new Vue() 是vue中最大的那个组件(根组件),有名字,使用的时候以单标签或双标 ...
- vue学习指南:第四篇(详细) - vue的 :class 和 :style
1. :class = “a” 说明 vue 中有个叫 a 的属性 这个标签的class 就是 a的值 2. :class = “{ active:isactive }” Active的存在取决于 i ...
随机推荐
- 抖音快手短视频去水印API,接口开发文档
开发者官网:http://api.lingquan166.com/ 简介:根据抖音.微视.小红书.皮皮搞笑等APP中复制出来的链接,解析获取短视频的标题.封面.无水印短视频地址等信息. 接口地址: h ...
- day 8 函数编程_byets
定义 bytes类型是指一堆字节的集合,在python中以b开头的字符串都是bytes类型 b'\xe5\xb0\x8f\xe7\x8c\xbf\xe5\x9c\x88' #b开头的都代表是bytes ...
- SpringBoot 教程之 profile 的应用
目录 区分环境的配置 区分环境的代码 激活 profile 示例源码 参考资料 一个应用为了在不同的环境下工作,常常会有不同的配置,代码逻辑处理.Spring Boot 对此提供了简便的支 ...
- BZOJ #2989. 数列 [树套树]
考虑转化问题模型,这个没必要可持久化,直接加点就可以了,还不用删点 每次的问题是求 曼哈顿距离,变成切比雪夫距离然后求解 然后我们考虑将这玩意旋转 45度, 然后原坐标的 \((x,y)\) 会变成 ...
- 破局AI落地难,数据标注行业需率先变革丨曼孚科技
2019年,国内人工智能领域的投融资热情大幅降低,相当数量的AI企业彻底消失在了历史的长河中,“人工智能寒潮已至”甚至成为行业年度热词. 与前几年创业与投资热情齐头并进的盛况相比,近段时间的AI行业 ...
- 20200228 尚硅谷-NIO
尚硅谷-NIO Java NIO简介 Java NIO(New IO.Non Blocking IO)是从Java1.4版本开始引入的新的 IO API,可以替代标准的 Java IO API. NI ...
- sql 根据查询的记录生成序号的几种方式
row_number() order() 函数会为查询出来的每一行记录生成一个序号,依次排序且不会重复,注意使用row_number函数时必须要用over子句选择对某一列进行排序才能生成序号. ra ...
- 使用栅格系统和flex布局开发响应式页面源码
响应式布局的原理xsmall <576pxsmall >=576pxmedium >=768pxlarge >=992pxxlarge >=1200px 接下来是效果图 ...
- windows下web端测试环境搭建(tomcat+oracle)
一.安装oracle数据库 1.关闭防火墙.360安全卫士,运行安装程序:Setup.exe,然后下一步...... 2.安装完成后,检查服务是否已启动 3.cmd输入验证登录成功:sqlplus s ...
- sklearn.metrics中的评估方法
https://www.cnblogs.com/mindy-snail/p/12445973.html 1.confusion_matrix 利用混淆矩阵进行评估 混淆矩阵说白了就是一张表格- 所有正 ...