Vue 路由缓存 防止路由切换数据丢失 路由的生命周期

news2025/1/18 6:49:46

在切换路由的时候,如果写好了一丢数据在去切换路由在回到写好的数据的路由去将会丢失,这时可以使用路由缓存技术进行保存,这样两个界面来回换数据也不会丢失
在这里插入图片描述

在 < router-view >展示的内容都不会被销毁,路由来回切换数据也不会丢失,但是这样写使用在 < router-view >展示的路由都会被缓存

  <keep-alive>
        <router-view></router-view>
        <!-- 路由器占位符 -->
   </keep-alive>

指定缓存的组件

//User组件
<script>
    export default ({
        name: 'User',      
    })
</script>
<!--include的User是组件名-->
   <keep-alive include="User">
        <router-view></router-view>
        <!-- 路由器占位符 -->
      </keep-alive>

这种方式只能设置一个或全部缓存 如果想指定两个需要这样操作

 :include="['User','Login']"

路由生命周期

activated(){
//路由被激活时


},
deactivated(){
//路由被切换走时

}

这两个是路由专有的生命周期,如果组件被缓存,是不会调用created和销毁函数的,这时候可以使用这两个函数

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

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

相关文章

《轻购优品》新零售玩法:消费积分认购+众筹新玩法

《轻购优品》新零售玩法&#xff1a;消费积分认购众筹新玩法 引言&#xff1a;2023年开年已来&#xff0c;政府的工作报告提出“把恢复和扩大消费摆在优先位置”&#xff0c;并且把2023年定位为“消费提振年”&#xff0c;以“全年乐享全年盛惠”为主题多地政府共同发力&#x…

LLM大模型4位量化实战【GPTQ】

权重量化方面的最新进展使我们能够在消费类硬件上运行大量大型语言模型&#xff0c;例如 RTX 3090 GPU 上的 LLaMA-30B 模型。 这要归功于性能下降最小的新型 4 位量化技术&#xff0c;例如 GPTQ、GGML 和 NF4。 在上一篇文章中&#xff0c;我们介绍了简单的 8 位量化技术和出…

2020年06月 Scratch(二级)真题解析#中国电子学会#全国青少年软件编程等级考试

Scratch等级考试(1~4级)全部真题・点这里 一、单选题(共25题,每题2分,共50分) 第1题 如下图所示脚本运行的结果是()? A:画一条直线 B:画一个三角形 C:画一个圆形 D:画一条虚线 答案:D 第2题 运行如下图所示脚本,下面选项中说法错误的是? A:“笔的颜色”…

计算机网络秋招面试题

自己在秋招过程中遇到的计算机网络的面试题 OSI七层网络模型 DNS&#xff1a;应用层协议 根据域名查IP地址 DNS查询⽅式有哪些&#xff1f; 递归解析 局部DNS服务器⾃⼰负责向其他DNS服务器进⾏查询&#xff0c;⼀般是先向该域名的根域服务器查询&#xff0c;再由根域名服…

C++之map容器

C之map容器 map构造和赋值 #include<iostream> #include<string> using namespace std; #include<map>void printMap(map<int,int>&m) {for (map<int,int>::iterator it m.begin();it ! m.end();it){//cout <<"key is: "&l…

macbook ntfs能读不能复制 c盘ntfs拒绝访问怎么解决

如果你是一位Mac用户&#xff0c;你可能会遇到这样的问题&#xff1a;你的Mac能够读取NTFS格式的移动硬盘或U盘&#xff0c;但是不能往里面复制或者修改文件。或者&#xff0c;你的Windows电脑出现了C盘NTFS拒绝访问的错误&#xff0c;导致你无法正常使用系统。这些问题都是由于…

Spring 设计模式-简洁版

Java 中包括以下设计模式&#xff1a; 其中Spring 用到的设计模式 1.简单工厂-BeanFactory 2.工厂方法FactoryBean 3.单例模式Bean实例 4.适配器模式SpringMVC中的HandlerAdatper 5.装饰器模式BeanWrapper 6.代理模式_AOP底层 7.观察者模式-spring的事件监听 8.策略横式exclud…

Unity在Windows选项下没有Auto Streaming

Unity在Windows选项下没有Auto Streaming Unity Auto Streaming插件按网上说的不太好使最终解决方案 Unity Auto Streaming插件 我用的版本是个人版免费版&#xff0c;版本号是&#xff1a;2021.2.5f1c1&#xff0c;我的里边Windows下看不到Auto Streaming选项,就像下边这张图…

Clickhouse初认识

技术主题-clickhouse 一什么是clickHouse 1&#xff09;本质上就是一款数据库管理系统&#xff0c;能提供海量数据的存储和检索 2&#xff09;基于列存储&#xff0c;数据是按照列进行存储的&#xff08;数据格式一样&#xff0c;方便进行压缩&#xff09; 3&#xff09;具备…

数据结构-插入排序+希尔排序+选择排序

目录 1.插入排序 插入排序的时间复杂度&#xff1a; 2.希尔排序 希尔排序的时间复杂度&#xff1a; 3.选择排序 选择排序的时间复杂度&#xff1a; 所谓排序&#xff0c;就是使一串记录&#xff0c;按照其中的某个或某些关键字的大小&#xff0c;递增或递减的排列起来的…

Gem5模拟器学习之旅——翻译自官网

文章目录 安装并使用gem5 模拟器支持的操作系统和环境依赖在 Ubuntu 22.04 启动(gem5 > v21.1)Docker获取代码用 SCons 构建用法首次构建 gem5gem5 二进制类型调试opt快速 常见错误错误的 gcc 版本Python 位于非默认位置未安装 M4 宏处理器Protobuf 3.12.3 问题 安装并使用g…

Pandas中loc和iloc函数(提取某几列或者行的数据)

loc函数&#xff1a;通过行索引&#xff08;列名、行名&#xff09; 中的具体值来取行数据&#xff08;如取"Index"为"A"的行&#xff09; iloc函数&#xff1a;通过行号&#xff08;数字&#xff09;来取行数据&#xff08;如取第二行的数据&#xff09;…

JAVA刷题之字符串的一些个人思路

感谢您的阅读&#xff01; ꒰˃͈꒵˂͈꒱ write in front ꒰˃͈꒵˂͈꒱ ʕ̯•͡˔•̯᷅ʔ大家好&#xff0c;我是xiaoxie.希望你看完之后,有不足之处请多多谅解&#xff0c;让我们一起共同进步૮₍❀ᴗ͈ . ᴗ͈ აxiaoxieʕ̯•͡˔•̯᷅ʔ—CSDN博客 本文由xiaoxieʕ̯…

【Spring总结】基于配置的方式来写Spring

本篇文章是对这两天所学的内容做一个总结&#xff0c;涵盖我这两天写的所有笔记&#xff1a; 【Spring】 Spring中的IoC&#xff08;控制反转&#xff09;【Spring】Spring中的DI&#xff08;依赖注入&#xff09;Dependence Import【Spring】bean的基础配置【Spring】bean的实…

计算机msvcr120.dll丢失的解决方法,分享多种亲测可靠的方法

在使用计算机的过程中&#xff0c;我们有时可能会遇到一些技术问题&#xff0c;其中之一就是提示丢失msvcr120.dll文件。当计算机提示丢失msvcr120.dll文件时&#xff0c;可能是由于某些程序无法找到这个文件&#xff0c;从而导致程序无法正常运行。那么我们需要如何解决修复好…

一文读懂:testcafe框架和页面元素交互

一、互动要求 使用 TestCafe 与元素进行交互操作&#xff0c;元素需满足以下条件&#xff1a;☟ 元素在 body 页面窗口或 iframe 窗口的元素内。如果某个元素在视口之外&#xff0c;则 TestCafe 通过滚动可以滚动到元素可见。 元素是可见的&#xff0c;具有以下属性&#…

Leetcode—剑指OfferII LCR 022.环形链表II【中等】

2023每日刷题&#xff08;三十三&#xff09; Leetcode—LCR 022.环形链表II 算法思想 参考k神的博客 实现代码 /*** Definition for singly-linked list.* struct ListNode {* int val;* struct ListNode *next;* };*/ struct ListNode *detectCycle(struct List…

2.3 调用智谱 API

调用智谱 API 1 申请调用权限2 调用智谱 AI API3 使用 LangChain 调用智谱 AI参考&#xff1a; 智谱 AI 是由清华大学计算机系技术成果转化而来的公司&#xff0c;致力于打造新一代认知智能通用模型。公司合作研发了双语千亿级超大规模预训练模型 GLM-130B&#xff0c;并构建了…

Python------列表 集合 字典 推导式(本文以 集合为主)

推导式&#xff1a; 推导式comprehensions&#xff08;又称解析式&#xff09;&#xff0c;是Python的一种独有特性。推导式是可以从一个数据序列 构建 另一个 新的数据序列&#xff08;一个有规律的列表或控制一个有规律列表&#xff09;的结构体。 共有三种推导&#xff…

HUAWEI华为笔记本MateBook X 2021款i5集显(EULD-WFH9,WXX9)原装出厂Windows11系统工厂模式包

下载链接&#xff1a;https://pan.baidu.com/s/1gQ_O203SSm83Nc-zDk1iNA?pwd4exz 提取码&#xff1a;4exz 系统带F10一键智能还原功能隐藏恢复分区、所有驱动、Office办公软件、华为电脑管家等预装程序 所需要工具&#xff1a;32G或以上的U盘 文件格式&#xff1a;zip …