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

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

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

html 复制代码
  <keep-alive>
        <router-view></router-view>
        <!-- 路由器占位符 -->
   </keep-alive>

指定缓存的组件

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

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

javascript 复制代码
 :include="['User','Login']"

路由生命周期

javascript 复制代码
activated(){
//路由被激活时


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

}

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

相关推荐
试图让你心动3 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
_Kayo_3 小时前
VUE2 学习笔记6 vue数据监测原理
vue.js·笔记·学习
陈琦鹏3 小时前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket
双力臂4044 小时前
Spring Boot 单元测试进阶:JUnit5 + Mock测试与切片测试实战及覆盖率报告生成
java·spring boot·后端·单元测试
小毛驴8505 小时前
创建 Vue 项目的 4 种主流方式
前端·javascript·vue.js
itLaity5 小时前
基于Kafka实现简单的延时队列
spring boot·分布式·kafka
midsummer_woo6 小时前
基于spring boot的医院挂号就诊系统(源码+论文)
java·spring boot·后端
daixin88486 小时前
什么是缓存雪崩?缓存击穿?缓存穿透?分别如何解决?什么是缓存预热?
java·开发语言·redis·缓存
JSON_L8 小时前
Vue 电影导航组件
前端·javascript·vue.js
计算机编程果茶熊8 小时前
毕设选题难、不会写代码、答辩紧张?校园失物招领系统从需求到实现全流程指南|计算机毕业设计
java·vue.js