2024年前端最全vue 离开页面之前保存数据_vue2离开页面保存数据在本地，2024前端常见面试题分享

最后

我可以将最近整理的前端面试题分享出来，其中包含HTML、CSS、JavaScript、服务端与网络、Vue、浏览器、数据结构与算法等等，还在持续整理更新中，希望大家都能找到心仪的工作。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

篇幅有限，仅展示部分截图：

下面写下实现的教程：

一、监听离开页面的时机用：beforeRouteLeave，存储用localStorage

beforeRouteLeave 是一个vue-router中大家都容易忽略却非常有用的组件独享导航守卫，它可以监听该组件页面路由跳转的时机，我们就可以在这个时机做我们想做的事情，写的时候和methods同级。

具体代码实现：
项目中project.vue:

<template>
  <div>
    <div class="list" v-for="(item, index) in listData" :key="index">
        <input type="text" v-model="listData[index]">
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      // 用v-model 将数据与input表单双向绑定
      listData: ['', '']
    }
  },
  created () {
    // 如果有数据，赋值到页面上
    const data = localStorage.getItem('list')
    if (data) this.listData = JSON.parse(data)
  },
  beforeRouteLeave (to, from, next) {
    // 监听到页面离开时调用
    // to: 即将要进入的目标的路由对象
    // from: 当前导航正要离开的路由
    // next: 是一个function，一定要调用该方法，否则路由不会跳转。
    if (to.$route.name === 'homePage') {
      // 离开到'homePage'时才存储数据，这里可以弹框询问用户是否保存数据，更人性化
      localStorage.setItem('list', JSON.stringify(this.listData))
    }
    // 一定要调用next
    next()
  },
  methods: {

  }
}
</script>

二、监听离开页面的时机用：beforeRouteLeave，存储用vuex

记得要在store.js里面设置list的值
store.js

export default new Vuex.Store({
  state: {
    list: null
  },
  mutations: {
    setList (state, list) {
      state.list = list
    }
  },
  actions: {
  },
  modules: {
  }
})

项目中project.vue:

<template>
  <div>
    <div class="list" v-for="(item, index) in listData" :key="index">
        <input type="text" v-model="listData[index]">
    </div>


### 总结

我在成长过程中也是一路摸爬滚打，没有任何人的指点，所以走的很艰难。例如在大三的时候，如果有个学长可以阶段性的指点一二，如果有已经工作的师兄可以告诉我工作上需要什么，我应该前面的三年可以缩短一半；后来去面试bat，失败了有5、6次，每次也不知道具体是什么原因，都是靠面试回忆去猜测可能是哪方面的问题，回来学习和完善，当你真正去招人的时候，你就会知道面试记录是多么重要，面试官可以从面试记录里看到你的成长，总是去面试，总是没有成长，就会被定义为缺乏潜力。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

![image](https://img-blog.csdnimg.cn/img_convert/bd9761f38fa5ff55f9d5ababda69b7ff.webp?x-oss-process=image/format,png)
![image](https://img-blog.csdnimg.cn/img_convert/e49056bf9a8fc0db9138e3d4bce8ffaf.webp?x-oss-process=image/format,png)

bs.csdn.net/topics/618166371)**

[外链图片转存中...(img-LXl196ao-1714985454764)]
[外链图片转存中...(img-Pw32Fycb-1714985454765)]