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

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

在 < 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和销毁函数的,这时候可以使用这两个函数

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【SpringBoot3+Vue3】四【实战篇】-前端(vue基础)

目录 一、项目前置知识 二、使用vscode创建 三、vue介绍 四、局部使用vue 1、快速入门 1.1 需求 1.2 准备工作 1.3 操作 1.3.1 创建html 1.3.2 创建初始html代码 1.3.3 参照官网import vue 1.3.4 创建vue应用实例 1.3.5 准备div 1.3.6 准备用户数据 1.3.7 通过…

DPDK初始化

rte_eal_init │ ├──rte_cpu_is_supported&#xff1a;检查cpu是否支持 │ ├──rte_atomic32_test_and_set&#xff1a;操作静态局部变量run_once确保函数只执行一次 │ ├──pthread_self() 获取主线程的线程ID,只是用于打印 │ ├──eal_reset_internal_config&#x…

UE 程序化网格 计算横截面

首先在构造函数内加上程序化网格&#xff0c;然后复制网格体到程序化网格组件上&#xff0c;将Static Mesh&#xff08;类型StaticMeshActor&#xff09;的静态网格体组件给到程序化网格体上 然后把StaticMesh&#xff08;类型为StaticMeshActor&#xff09;Instance暴漏出去 …

异地工业设备集中运维、数据采集,一招搞定

为了提升运维效率&#xff0c;能够及时发现和响应设备的故障、异常和潜在问题。 越来越多的企业都在搭建“集中式”的远程智慧运维体系&#xff0c;以提高运维效率和降低成本。 异地工业设备远程运维&#xff0c;提升响应效率、降低运维成本 以国内陕西某机床公司为例&#xff…

在vmware中给linux添加硬盘

1.必须在断开linux电源的情况下&#xff0c;才能添加硬盘成功。注&#xff1a;自己好几次在开机状态下添加硬盘都失败了&#xff0c;然后关机后&#xff0c;又试了下&#xff0c;居然成功了。

Python (十一) 迭代器与生成器

迭代器 迭代器是访问集合元素的一种方式&#xff0c;可以记住遍历的位置的对象 迭代器有两个基本的方法&#xff1a;iter() 和 next() 字符串&#xff0c;列表或元组对象都可用于创建迭代器 字符串迭代 str1 Python str_iter iter(str1) print(next(str_iter)) print(next(st…

Docker入门学习笔记

学习笔记网址推送&#xff1a;wDocker 10分钟快速入门_哔哩哔哩_bilibili docker是用来解决什么问题的&#xff1f; 例如当你在本地主机写了个web应用&#xff0c;而你打算将该应用发送给其他客户端进行案例测试和运行&#xff0c;若是传统做法&#xff0c;就比较复杂&#xf…

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

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

mmdet 3.x 打印各类指标

和mmdet2.x中的修改地方不一样&#xff0c;在mmdet/evaluation/metrics/coco_metric.py中第72行将classwise设为True就可以打印各类指标了 但是在test的时候一直都是什么指标都不打印&#xff0c;不管是上面总的指标还是下面的各类指标&#xff0c;暂时不知道怎么处理 找到原因…

【一周安全资讯1118】北京高院发布《侵犯公民个人信息犯罪审判白皮书》;工银金融勒索案的事件响应服务商MoxFive是谁?

要闻速览 1、工信部等四部门部署开展智能网联汽车准入和上路通行试点工作 2、北京高院发布《侵犯公民个人信息犯罪审判白皮书》 3、丰田公司确认遭遇美杜莎勒索软件攻击 4、家中设备把数据信息泄露到国外&#xff0c;浙江一男子被罚5000元 5、工银金融勒索案的事件响应服务商M…

合成事件在san.js中的应用

一、 什么是合成事件 DOM3 Event 新增了合成事件(CompositionEvent ), 用于处理通常使用 IME 输入时的复杂输入序列。 二、合成事件常见事件 compositionstart&#xff1a;文本合成系统如 IME&#xff08;即输入法编辑器&#xff09;开始新的输入合成时会触发 compositionst…

如何实现用户未登录不可访问系统

在开发web系统时&#xff0c;如果用户不登录&#xff0c;发现用户也可以直接正常访问系统&#xff0c;这种设计本身并不合理&#xff0c;那么我们希望看到的效果是&#xff0c;只有用户登录成功之后才可以正常访问系统&#xff0c;如果没有登录则拒绝访问。那么我们可以使用过滤…

迪杰斯特拉算法(C++)

目录 介绍&#xff1a; 代码&#xff1a; 结果&#xff1a; 介绍&#xff1a; 迪杰斯特拉算法&#xff08;Dijkstras algorithm&#xff09;是一种用于计算加权图的单点最短路径的算法。它是由荷兰计算机科学家Edsger W. Dijkstra在1956年发明的。 该算法的思路是&#xf…

算法通关村——不简单的字符串转换问题

字符串转化整数(atoi) 1、题目描述 LeetCode8. 请你来实现一个myAtoi(String s)函数&#xff0c;使其能将字符串转换成一个32位有符号整数&#xff08;类似C/C 中的atoi函数&#xff09;。 函数myAtoi(String s) 的算法如下&#xff1a; 读入字符串并丢弃无用的前导空格。检…

Vue3 toRef函数和toRefs函数

当我们在setup 中的以读取对象属性单独交出去时&#xff0c;我们会发现这样会丢失响应式&#xff1a; setup() {let person reactive({name: "张三",age: 18,job: {type: "前端",salary:10}})return {name: person.name,age: person.age,type: person.jo…

OpenAI发布会中不起眼的重大更新

上周&#xff0c;OpenAI的历史首届开发者大会上&#xff0c;OpenAI的首席执行官山姆奥特曼展示了一系列产品更新&#xff0c;包含了众多重磅功能&#xff0c;就算单独拿出来都能让科技圈震一震&#xff0c;一下能发布这么多也真是家底厚。 果不其然&#xff0c;接下来的一周&am…

轻量服务器和云服务器的区别,轻量应用服务器和云服务器区别对比

在云计算时代&#xff0c;服务器作为互联网应用的基础设施&#xff0c;扮演着重要的角色。对于个人用户、个人开发者、学生用户和个人站长来说&#xff0c;选择一款适合自己的服务器是一个关键的决策。本文将介绍轻量服务器和标准云服务器的优点和应用场景&#xff0c;帮助读者…

内存模型以及如何判定对象已死问题

1.展示堆内存溢出 设置堆的内存大小为10M&#xff0c;最大的堆内存为10M&#xff0c;这两个参数最好一致&#xff0c;即便最大内存设置为1G&#xff0c;很有可能也分配不到1G。 -Xmx10M -Xms10M 一直往list放东西 public class T1 {public static void main(String[] args) …

基于 gin + websocket 即时通讯项目 (一、项目初始化)

基于 gin websocket 即时通讯项目 1、安装环境与初始化 搜索各种包官网 https://pkg.go.dev/ 1.1 安装 grom go get -u gorm.io/grom 1.2 安装 MySQL 驱动 go get -u gorm.io/driver/sqlite go get -u gorm.io/driver/mysql 1.3 安装 gin go get -u github.com/gin-gonic/gi…

Matlab绘制双坐标轴图示例函数yyaxis

一、前言 出于一些需求&#xff0c;我们需要将两个不同属性的参量绘制在同一张图上&#xff0c;但是两个参量属性不同&#xff0c;即单位不同&#xff0c;纵坐标值分布范围不同&#xff0c;此刻&#xff0c;我们只需要将一个参量的值在y轴左侧展示&#xff0c;另一个参量的值在…