keep-alive缓存三级及三级以上路由

需求需要缓存这个出入记录,当tab切换时不重新加载,当刷新页面时,或把这个关闭在重新打开时重新加载如图:

(我这里用的是芋道源码的前端框架)

keep-alive

1、include 包含页面组件name的这些组件页面,会被缓存起来
2、exclude 除了这些name以外的页面组件,会被缓存起来
3、没有include或者exclude属性,表示所有的路由组件都会被缓存起来

<template><section class="app-main"><transition name="fade-transform" mode="out-in"><keep-alive :include="cachedViews" exclude="redirect"><router-view :key="key" /></keep-alive></transition></section>
</template><script>
export default {name: 'AppMain',computed: {cachedViews() {return this.$store.state.tagsView.cachedViews},key() {return this.$route.path}}
}
</script>

解决方法

现在router里面的index.js里面把这三个路由写出来

然后在仓库里面手动把二级路由加上

这样就可以了

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/76436.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

常用设计模式

游戏开发中常用的设计模式有很多种&#xff0c;以下是一些常见的设计模式&#xff1a; 1. 单例模式&#xff08;Singleton Pattern&#xff09;&#xff1a;用于创建一个全局唯一的对象实例&#xff0c;比如游戏中的资源管理器或者游戏设置。 2. 工厂模式&#xff08;Factory …

MySQL内外连接

MySQL内外链接 内连接显示SMITH的名字和部门名称 外连接左外连接查询所有学生的成绩&#xff0c;如果这个学生没有成绩&#xff0c;也要将学生的个人信息显示出来 右外连接把所有的成绩都显示出来&#xff0c;即使这个成绩没有学生与它对应&#xff0c;也要显示出来列出部门名称…

OpenCV(三十六):霍夫直线检测

1.检测直线的霍夫变换原理 2.检测直线函数HoughLines() 检测直线流程: Step1:将参数空间的坐标轴离散化。 Step2:将图像中每个非0像素通过映射关系求取在参数空间通过的方格 Step3:统计参数空间内每个方格出现的次数&#xff0c;选取次数大于某一值的方格作为表示直线的方格…

【Electron】electron与cljs的处理

实现效果: 前言&#xff1a; 如何用cljs的方式&#xff0c;编写electron应用&#xff0c;可以实现多窗体应用 要使用ClojureScript&#xff08;CLJS&#xff09;编写一个 Electron 应用程序&#xff0c;并实现多窗体功能&#xff0c;您可以按照以下步骤进行操作&#xff1a; …

【自然语言处理】关系抽取 —— MPDD 讲解

MPDD 论文信息 标题:MPDD: A Multi-Party Dialogue Dataset for Analysis of Emotions and Interpersonal Relationships 作者:Yi-Ting Chen, Hen-Hsen Huang, Hsin-Hsi Chen 期刊:LREC 2020 发布时间与更新时间:2020 主题:自然语言处理、关系抽取、对话场景、情感预测 数…

lintcode 567 · 最大得分 【动态规划 中等 】

题目 https://www.lintcode.com/problem/567 给定一个矩阵matrix&#xff0c; matrix[i][j]表示你到达第i行第j列可以得到的分数&#xff0c;现在你要用第0行任意一点出发&#xff0c;从每行里找到一个点进行跳跃&#xff0c;每次从(i,j)到(i1,k)跳跃需要消耗∣j−k∣的分数&…

C语言实现扫雷小游戏

1.首先扫雷游戏要存储布置好的雷信息&#xff0c;需要一个二维数组 不是雷放* 雷&#xff1a;# 不是雷&#xff1a;0 雷&#xff1a;1 2. 给2个二维数组 9*9 一个存放雷的信息&#xff0c;一个存放布置好雷的信息 3.为了防止在统计坐标周围的…

基于人工智能与边缘计算Aidlux的工业表面缺陷检测

一&#xff1a;训练yolov8得到onnx模型&#xff08;相关教程有很多&#xff09; 二&#xff1a;模型转化&#xff1a; 网站&#xff1a; https://aimo.aidlux.com/ 输入试用账号和密码: 账号:AIMOTC001&#xff0c;密码:AIMOTC001 我们选择 TensorFlowLite 一步步完成转化 …

TCP的三次握手与四次挥手

首先&#xff0c;源端口号和目标端口号是不可少的&#xff0c;这一点和 UDP 是一样的。如果没有这两个端口号。数据就不知道应该发给哪个应用。 接下来是包的序号。为什么要给包编号呢&#xff1f;当然是为了解决乱序的问题。不编好号怎么确认哪个应该先来&#xff0c;哪个应该…

跨站请求伪造

1.CSRF 概述 1.1 CSRF 原理 1.1.1 基本概念 ​ 跨站请求伪造&#xff08;Cross Site Request Forgery&#xff0c;CSRF&#xff09;是一种攻击&#xff0c;它强制浏览器客户端用户在当前对其进行身份验证后的Web 应用程序上执行非本意操作的攻击&#xff0c;攻击的重点在于更…

选择排序——直接选择排序

直接选择排序&#xff1a;&#xff08;以重复选择的思想为基础进行排序&#xff09; 1、简述 顾名思义就是选出一个数&#xff0c;再去抉择放哪里去。 设记录R1&#xff0c;R2…&#xff0c;Rn&#xff0c;对i1&#xff0c;2&#xff0c;…&#xff0c;n-1&#xff0c;重复下…

分布式、锁、延时任务

1. redission redission 原理 Redis分布式锁-这一篇全了解(Redission实现分布式锁完美方案) 2.zk 2.1 指令 ls / / 下有哪些子节点 get /zookeeper 查看某个子节点内容 create /aa “test” delete /aa set /aa “test01” 2.2 创建节点 模式 默认创建永久 create -e …

用sklearn实现线性回归和岭回归

此文为ai创作&#xff0c;今天写文章的时候发现创作助手限时免费&#xff0c;想测试一下&#xff0c;于是就有了这篇文章&#xff0c;看的出来&#xff0c;效果还可以&#xff0c;一行没改。 线性回归 在sklearn中&#xff0c;可以使用线性回归模型做多变量回归。下面是一个示…

Python基础: with模式和__enter__ 和 __exit__

一、说明 有一些任务&#xff0c;可能事先需要设置&#xff0c;事后做清理工作。 with方法就是python的非常酷的语句&#xff0c;安全可靠&#xff0c;方便。我们自己的类如何具备with的能力?必须拥有__enter__()方法&#xff0c;另一个__exit__()&#xff0c;因此&#xff0c…

黑马JVM总结(五)

&#xff08;1&#xff09;方法区 它是所有java虚拟机 线程共享的区&#xff0c;存储着跟类的结构相关的信息&#xff0c;类的成员变量&#xff0c;方法数据&#xff0c;成员方法&#xff0c;构造器方法&#xff0c;特殊方法&#xff08;类的构造器&#xff09; 方法区在虚拟机…

【算法专题突破】双指针 - 最大连续1的个数 III(11)

目录 1. 题目解析 2. 算法原理 3. 代码编写 写在最后&#xff1a; 1. 题目解析 题目链接&#xff1a;1004. 最大连续1的个数 III - 力扣&#xff08;Leetcode&#xff09; 这道题不难理解&#xff0c;其实就是求出最长的连续是1的子数组&#xff0c; 但是&#xff0c;他支…

用vagrant快速创建linux虚拟机

参考B站&#xff1a;https://www.bilibili.com/video/BV1np4y1C7Yf 1、下载VirtualBox 2、下载vagrant 3、vagrant官网下载.box文件 官网&#xff1a;https://app.vagrantup.com/boxes/search 例如要下载这个centos/7 点进去&#xff0c;点击下载 下载后放到一个指定目录…

OSCP系列靶场-Esay-SunsetNoontide保姆级

OSCP系列靶场-Esay-SunsetNoontide 目录 OSCP系列靶场-Esay-SunsetNoontide总结准备工作信息收集-端口扫描目标开放端口收集目标端口对应服务探测 信息收集-端口测试chatgpt学习 漏洞利用-getwebshell漏洞利用-unrealircd 内网遨游-getshell交互shellFLAG1获取信息收集-内网基础…

typeScript--[interface接口实现类的定义,函数定义,可索引定义]

一.定义函数接口 interface Fn {(name: string): void; } var fn: Fn function (name): void {console.log(name); }; fn("逍遥的码农"); 二.定义类的接口 定义类需要用到关键字implements跟上定义的接口 interface Me {name: string;age: number;say(): void; }…

【C++进阶】二叉树进阶之二叉搜索树

&#x1f466;个人主页&#xff1a;Weraphael ✍&#x1f3fb;作者简介&#xff1a;目前学习C和算法 ✈️专栏&#xff1a;C航路 &#x1f40b; 希望大家多多支持&#xff0c;咱一起进步&#xff01;&#x1f601; 如果文章对你有帮助的话 欢迎 评论&#x1f4ac; 点赞&#x1…