ES6语法改写导致的错误求解

Question

研究Vue-Element-Template 这个vue admin 管理后台中，发现了一个问题

watch: {
  $route: {
    handler: function (route) {
      this.redirect = route.query && route.query.redirect
    },
    immediate: true
  }
},

这部分我试图用ES6的语法改写变成

watch: {
  $route: {
    handler: (route) => {
      this.redirect = route.query && route.query.redirect
    },
    immediate: true
  }
},

console报错

vue.runtime.esm.js?2b0e:619 
    
[Vue warn]: Error in callback for immediate watcher "$route": "TypeError: Cannot set properties of undefined (setting 'redirect')"


TypeError: Cannot set properties of undefined (setting 'redirect')
at VueComponent.handler (index.vue?6ced:129:1)
at VueComponent.Vue.$watch (vue.runtime.esm.js?2b0e:4943:1)

为什么会这样呢？这里如果使用ES6 的语法改写应该是如何的呢？

该项目其他源码具体在 vue-admin-template login/index.vue部分中

Answer 1

这和写法无关，是 this 指向的问题，箭头函数和普通函数的区别，追求简洁的话，可以这样写

watch: {
  $route: {
    handler(route) {
      this.redirect = route.query && route.query.redirect;
    },
    immediate: true,
  },
};

Answer 2

function 函数体中访问的 this 则是函数执行时才确定的（当然也可以使用bind等方法修改）。
Vue 利用了这一特性，让开发者先拿this用着，后面Vue会帮忙把 this 指向Vue/Vue-conponent 的实例，vue-router 也是如此。
用箭头函数,Vue就帮不了你了，因为箭头函数体中访问的 this 是函数初始化的时候就确定的，Vue表示帮不了你。