Vue退出登录时清空缓存的实现

 更新时间:2019年11月12日 10:09:13   作者:肖雅峰-Amos  
今天小编就为大家分享一篇Vue退出登录时清空缓存的实现,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

如下所示:

 
<template>
  <div id="main" class="app-main">
    <router-view></router-view>
  </div>
</template>
 
<script>
  export default {
    data () {
      return {
        theme: this.$store.state.app.themeColor
      };
    },
    mounted () {
 
    },
    beforeDestroy () {
 
    },
    methods: {
 
    },
    mounted(){
      // 关闭浏览器窗口的时候清空浏览器缓存在localStorage的数据
      window.onbeforeunload = function (e) {
        var storage = window.localStorage;
        storage.clear()
      }
    }
 
 
  };
</script>
 
<style>
html,body{
  width: 100%;
  height: 100%;
  background: #f0f0f0;
  overflow: hidden;
}
.app-main{
  width: 100%;
  height: 100%;
}

如果是多页面的程序的话,在每一个页面同理只要在mounted方法中,注册这个事件即可!

以上这篇Vue退出登录时清空缓存的实现就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue3中10多种组件通讯方法小结

    Vue3中10多种组件通讯方法小结

    本文主要介绍了Vue3中10多种组件通讯方法小结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-06-06
  • 使用element-ui的Pagination分页的注意事项及说明

    使用element-ui的Pagination分页的注意事项及说明

    这篇文章主要介绍了使用element-ui的Pagination分页的注意事项及说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-02-02
  • 详解vscode中vue代码颜色插件

    详解vscode中vue代码颜色插件

    vscode的确是前端开发中很好的工具,安装颜色插件,从视觉上是美的享受。这篇文章主要介绍了vscode中vue代码颜色插件 ,需要的朋友可以参考下
    2018-10-10
  • vue打包通过image-webpack-loader插件对图片压缩优化操作

    vue打包通过image-webpack-loader插件对图片压缩优化操作

    这篇文章主要介绍了vue打包通过image-webpack-loader插件对图片压缩优化操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • 解决vue多层弹框时存在遮挡问题

    解决vue多层弹框时存在遮挡问题

    本文给大家介绍vue多层弹框时存在遮挡问题,解决思路首先想到的是找到对应的遮挡层的css标签,然后修改z-index值,但是本思路只能解决首次问题,再次打开还会存在相同的问题,故该思路错误,下面给大家带来一种正确的思路,一起看看吧
    2022-03-03
  • vue-resource拦截器设置头信息的实例

    vue-resource拦截器设置头信息的实例

    下面小编就为大家带来一篇vue-resource拦截器设置头信息的实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • Vue.js系列之vue-router(上)(3)

    Vue.js系列之vue-router(上)(3)

    这篇文章主要介绍了Vue.js系列之vue-router(上)(3)的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-01-01
  • vue使用assign巧妙重置data数据方式

    vue使用assign巧妙重置data数据方式

    这篇文章主要介绍了vue使用assign巧妙重置data数据方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-03-03
  • 示例解析Ant Design Vue组件slots作用

    示例解析Ant Design Vue组件slots作用

    这篇文章主要为大家通过示例解析Ant Design Vue组件slots作用,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-05-05
  • vue使用echarts实现水平柱形图实例

    vue使用echarts实现水平柱形图实例

    这篇文章主要介绍了vue使用echarts实现水平柱形图实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09

最新评论