当前位置: 首页 > article >正文

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


http://www.kler.cn/a/135041.html

相关文章:

  • Diffusion Policy——斯坦福机器人UMI所用的扩散策略:从原理到其编码实现(含Diff-Control、ControlNet详解)
  • 【Webpack实用指南】如何拆分CSS资源(2)
  • Systemd: disable和mask的区别
  • 笔记 | image may have poor performance,or fail,if run via emulation
  • 服务号消息折叠折射出的腾讯傲慢:上云会不会也一样?
  • 初始JavaEE篇 —— 网络编程(2):了解套接字,从0到1实现回显服务器
  • 虾皮台湾站点如何选品
  • 关于代码混淆,看这篇就够了
  • NX二次开发UF_CAM_ask_f_s_db_object 函数介绍
  • redis+python 建立免费http-ip代理池;验证+留接口
  • IC卡操作软件支持PN532
  • python 集合(set)
  • 基于 FFmpeg 的跨平台视频播放器简明教程(十一):一种简易播放器的架构介绍
  • 如何解决swagger-editor在线接口调试时的跨域问题
  • 海外IP代理如何助力跨境电商?
  • 海外媒体发稿:出口贸易媒体发稿16个超实用技巧-华媒舍
  • 系列九、JUC强大的辅助类
  • 3.ubuntu20.04环境的ros搭建
  • 使用requests库进行网络爬虫:IP请求错误的解决方法
  • 免费小程序商城搭建之b2b2c o2o 多商家入驻商城 直播带货商城 电子商务b2b2c o2o 多商家入驻商城 直播带货商城 电子商务
  • 2.发送邮件+开发注册功能
  • uniapp、小程序canvas相关
  • 金蝶云星空ScpSupRegHandler任意文件上传漏洞复现 [附POC]
  • 【【VDMA彩条显示实验之四 含C语言代码】】
  • android studio导入eclipse项目
  • SpringBoot中文乱码问题解决方案