监听beforeunload解决数据刷新丢失方案

一刷新,我的tab就没了,上代码

const refresh = () => {
  window.addEventListener('beforeunload', () => {
    // 刷新前把渲染成Tab的列表存进本地
    sessionStorage.setItem("tabs_routes", JSON.stringify(tablist.value))
  })
  let session = sessionStorage.getItem('tabs_routes')
  if (session) {
    // 取出来转成数组
    let tabItem = JSON.parse(session)
    // console.log(tabItem);
    // 老师的方法
    // tabItem.forEach(tab => {
    //   store.commit('addTab', tab)
    // })
    // 我的方法,直接复制,懒得搞
    // store.commit('refresh', tabItem)
    store.refresh(tabItem)

  }
}

监听刷新动作,把数组转字符串,然后拿的时候用JSON.parse(session),取出来转成数组

最后记得在挂载函数中调用

onMounted(() => {
  addTab()//初始化就把首页添加进去,路由变化也加进去
  // 挂在调用刷新事件
  refresh()
})