vue數據緩存

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()
},