【Vue】TypeError: Cannot read properties of undefined (reading ‘xxx‘)

错误代码块

beforeRouteEnter(to, from, next) {
    console.log(parseInt(sessionStorage.getItem("index")));//可以打印
    console.log(this.active);//访问不到
    if (sessionStorage.getItem("index")) {
      this.active = parseInt(sessionStorage.getItem("index"));//赋值不了，会报错
    }
    next();
  },
1
2
3
4
5
6
7
8

用途

用记录用户每次从几页离开的，当用户再回来继续展示那一页
很明显console.log(this.active)访问不到data中的active数据，不能在组件内的导航守卫：进入前就访问data中的数据。

解决办法

<script>
var index = 0;//1、全局初始化一个变量跟data中的active的值一致
export default {
  data() {
    return {
      active: 0,
    };
  },
  created() {
    this.active = index;//在created生命周期里已经可以访问到data中的数据了，此时再赋值即可
  },
  beforeRouteLeave(to, from, next) {
    sessionStorage.setItem("index", this.active);//3、用户离开组件的时候将用户点击的那一页存下来
    next();
  },
  beforeRouteEnter(to, from, next) {
    if (sessionStorage.getItem("index")) {
      index = parseInt(sessionStorage.getItem("index"));//2、由于进入组件的时候还访问不到data中的值，可以先赋值给index
    }
    next();
  },
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

你可以选择sessionStorage，也可以选择vuex，看个人习惯。我觉得就一个值也没必要搞得过去复杂了。