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

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

相关文章
|
30天前
|
JavaScript
vue实例的data属性,可以在哪些生命周期中获取到
Vue实例的`data`属性在`beforeCreate`、`created`和`beforeMount`阶段已可访问。此时,虽能使用数据,但事件监听和DOM操作不可行。`beforeCreate`时数据可访问,但未初始化观测和事件;`created`时数据完全可用,但未挂载到DOM;`beforeMount`时仍可访问数据,DOM挂载未开始。
31 3
|
1月前
|
JavaScript
在vue中,在哪个生命周期内调用异步请求?
在vue中,在哪个生命周期内调用异步请求?
25 0
|
1月前
|
JavaScript
在vue中,Vue 的父组件和子组件生命周期钩子函数执行顺序?
在vue中,Vue 的父组件和子组件生命周期钩子函数执行顺序?
16 0
|
1月前
|
JavaScript
在vue中,谈谈你对 Vue 生命周期的理解?
在vue中,谈谈你对 Vue 生命周期的理解?
17 0
|
19天前
|
JavaScript
vue路由导航守卫(全局守卫、路由独享守卫、组件内守卫)
vue路由导航守卫(全局守卫、路由独享守卫、组件内守卫)
35 0
|
1月前
vue3配置路由报错Catch all routes (“*“) must now be defined using a param with a custom regexp.
vue3配置路由报错Catch all routes (“*“) must now be defined using a param with a custom regexp.
44 0
|
1月前
|
JavaScript
如何使用Vue异步组件技术实现路由懒加载?
如何使用Vue异步组件技术实现路由懒加载?
13 1
|
3天前
|
资源调度 JavaScript 前端开发
Vue的路由管理:VueRouter的配置和使用
【4月更文挑战第24天】VueRouter是Vue.js的官方路由管理器,用于在单页面应用中管理URL路径与组件的映射。通过安装并引入VueRouter,设置路由规则和创建router实例,可以实现不同路径下显示不同组件。主要组件包括:`&lt;router-link&gt;`用于创建导航链接,`&lt;router-view&gt;`负责渲染当前路由对应的组件。此外,VueRouter还支持编程式导航和各种高级特性,如嵌套路由、路由参数和守卫,以应对复杂路由场景。
|
1天前
|
JavaScript 数据可视化 算法
vue3+threejs可视化项目——搭建vue3+ts+antd路由布局(第一步)
vue3+threejs可视化项目——搭建vue3+ts+antd路由布局(第一步)
16 6
|
2天前
|
存储 JavaScript 前端开发
【Vue】绝了!这生命周期流程真...
【Vue】绝了!这生命周期流程真...

热门文章

最新文章