vue中keep-alive路由缓存
- <keep-alive>
- <component v-bind:is="view"></component>
- </keep-alive>
专属生命周期
- activited keep-alive专属,组件被激活时调用
- deadctivated keep-alive专属,组件被销毁时调用
用于子组件缓存,可以让子组件缓存还是不缓存
- <!-- 失活的组件将会被缓存!-->
- <keep-alive>
- <component v-bind:is="currentTabComponent"></component>
- </keep-alive>
- <keep-alive>
- <component>
- <!-- 该组件将被缓存! -->
- </component>
- </keep-alive>
- include - 字符串或正则表达,只有匹配的组件会被缓存
- exclude - 字符串或正则表达式,任何匹配的组件都不会被缓存
- // 组件 a
- export default {
- name: 'a',
- data () {
- return {}
- }
- }
- <keep-alive include="a">
- <component>
- <!-- name 为 a 的组件将被缓存! -->
- </component>
- </keep-alive>可以保留它的状态或避免重新渲染
需要router
- <keep-alive>
- <router-view>
- <!-- 所有路径匹配到的视图组件都会被缓存! -->
- </router-view>
- </keep-alive>
- 使用 include/exclude
- 增加 router.meta 属性
- // 组件 a
- export default {
- name: 'a',
- data () {
- return {}
- }
- }
- <keep-alive include="a">
- <router-view>
- <!-- 只有路径匹配到的视图 a 组件会被缓存! -->
- </router-view>
- </keep-alive>
增加router属性
- // routes 配置
- export default [
- {
- path: '/',
- name: 'home',
- component: Home,
- meta: {
- keepAlive: true // 需要被缓存
- }
- }, {
- path: '/:id',
- name: 'edit',
- component: Edit,
- meta: {
- keepAlive: false // 不需要被缓存
- }
- }
- ]
- <keep-alive>
- <router-view v-if="$route.meta.keepAlive">
- <!-- 这里是会被缓存的视图组件,比如 Home! -->
- </router-view>
- </keep-alive>
- <router-view v-if="!$route.meta.keepAlive">
- <!-- 这里是不被缓存的视图组件,比如 Edit! -->
- </router-view>
分析一个写的很详细的地方:很详细https://www.jianshu.com/p/0b0222954483
- // 组件 a
- // 组件 a
vue中keep-alive路由缓存的更多相关文章
- vue中怎样实现 路由拦截器
vue中怎样实现 路由拦截器(当用户没有登录的时候,跳转到登录页面,已经登录的时候,不能跳转到登录页,除非后台token失效) 在 我们需要实现这样 一个功能,登录拦截 其实就是 路由拦截,首先在定义 ...
- vue中使用keepAlive组件缓存遇到的坑
项目开发中在用户由分类页category进入detail需保存用户状态,查阅了Vue官网后,发现vue2.0提供了一个keep-alive组件. 上一篇讲了keep-alive的基本用法,现在说说遇到 ...
- [Vue 牛刀小试]:第十二章 - 使用 Vue Router 实现 Vue 中的前端路由控制
一.前言 前端路由是什么?如果你之前从事的是后端的工作,或者虽然有接触前端,但是并没有使用到单页面应用的话,这个概念对你来说还是会很陌生的.那么,为什么会在单页面应用中存在这么一个概念,以及,前端路由 ...
- vue中的静态路由
单页Web应用(single page web application,SPA),就是只有一张Web页面的应用.单页应用程序 (SPA) 是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面 ...
- 060——VUE中vue-router之路由嵌套在文章系统中的使用方法:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 059——VUE中vue-router之路由嵌套在文章系统中的使用方法:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue中监听路由参数的变化
在vue项目中,假使我们在同一个路由下,只是改变路由后面的参数值,期望达到数据的更新. mounted: () =>{ this.id = this.$route.query.id; this. ...
- vue 中 相同的路由不会跳转,更改路由的办法
vue 开发的项目,路由跳转的时候,是相同的路由是不会跳转,页面也不会有更新的 有时候 必须要跳转怎么办, 更改一个参数,num,一直在改变.就可以进入了. this.$router.push({ p ...
- 057——VUE中vue-router之路由参数默认值的设置
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 056——VUE中vue-router之路由参数的验证处理保存路由安全
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- Hibernate3核心API使用
public static void main(String[] args) throws Exception{ // 1. 加载默认的hibernate.cfg.xml的配置文件 Configura ...
- RabbitMQ学习之:(十一)AMQP.0-10规范,中文翻译1,2,3章 (转载)
From:http://blog.sina.com.cn/s/blog_4aba0c8b0100p6ho.html From: http://blog.sina.com.cn/s/blog_4aba0 ...
- 原生vue实现表格的编辑,包括单元格合并,拆分,删除行/列, 添加行/列
先看效果图如下: 代码看这里: https://github.com/YalongYan/vue-table-edit
- IDEA使用git
本文转自:http://www.cnblogs.com/java-maowei/p/5950930.html 一.安装git 下载地址: https://git-scm.com/download/w ...
- powerdesigner使用遇到的一些问题
1.数据库逆向生成er图时,连接数据库问题 由于powerdesigner版本是32位,可能就导致不兼容64位的机器,导致连接mysql失败: 解决方法:方法1.重新配置32位jdk 方法2.mysq ...
- 安装python3.6并使用virtualenvwrapper管理虚环境
1.安装python3.6.5依赖环境 注:python3.7.4需要安装:yum install libffi-devel -y yum install gcc patch libffi-devel ...
- 李宏毅 Keras2.0演示
李宏毅 Keras2.0演示 不得不说李宏毅老师讲课的风格我真的十分喜欢的. 在keras2.0中,李宏毅老师演示的是手写数字识别(这个深度学习框架中的hello world) 创建网络 首先我们需要 ...
- 【VS开发】CFormView
原文地址:CFormView作者:罗纳尔多 CFormView是MFC使用无模式对话框的一个典型例子.CFormView是基于对话框模板创建的视,它的直接基类是CSrcollView,CSrcollV ...
- vue router 报错: Uncaught (in promise) NavigationDuplicated {_name:""NavigationDuplicated"... 的解决方法
参考资料:https://blog.csdn.net/zy21131437/article/details/99548983
- 性能排查--CPU占用高
排查思路: 1.先找到占用CPU高的进程PID top命令 2.top -H -p <PID> 查看哪个占用CPU高的线程TID 3.jstack <PID> /ho ...