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

.生产的驴2023-11-19 11:22

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

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

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