vue数据缓存

Posted 2021-05-27 枫叶婉婷

vue数据缓存

做项目的时候遇到一个页面存在两个模块，当点击第二个模块列表的时候点详情之后返回列表页面会跳转到第一个页面，不是停留在第二个页面，这时候就需要做数据的缓存。

<el-tabs v-model="activeName" @tab-click="handleClick">`
<el-tab-pane label="名称1" name="1">
</el-tab-pane>
<el-tab-pane label="名称2" name="2">
</el-tab-pane>
</el-tabs>

<script>
     export default {
        name: "index",
        data() {
            return {
                activeName:\'1\',  //tab切换
            }
        }，
         //如果获取的数据和存储的数据一致，就将存储的数据赋给点击绑定的值
          created(){
            if(sessionStorage.getItem(\'actIndx\')){
                this.activeName = sessionStorage.getItem(\'actIndx\')
            }
        },
         methods: {
            //缓存Tabs 标签页点击事件
            handleClick(tab) {
                sessionStorage.setItem(\'actIndx\',this.activeName)
            },
     }
</script>

beforeRouteLeave(to, from, next) ： 离开路由之前执行的函数,可用于页面的反向传值，页面跳转。

当路由跳转其他页面的时候将此处的缓存数据清空

beforeRouteLeave(to,from,next){
    sessionStorage.removeItem(\'actIndx\')
    next()
},