Vuejs2 VueJs上的$route watch函数中的组件范围不正确

全部

我正在开发一个应用程序，需要根据应用程序路径加载/更改数据

为了知道url何时被更改，我在

$route

中添加了一个

watch

函数，我想调用同一组件中的一个函数来加载数据，所有工作都正常唯一的事情是

watch

函数中的

this

的范围，而不是引用VueComponent实例返回另一个对象

下面是我的简化代码，以获得一个想法

组件.vue

<template>
  <div id="lists">
    {{pageTitle}}
  </div>
</template>

<script>
  export default {
    name: 'lists',
    data() {
      return {
        pageTitle: 'Some Title',
      };
    },
    created() {
      console.log('LOAD THE ASKED PATH');
      console.log(this.$route.params); /* Object */
      console.log(this); /* VueComponent Instance */
    },
    watch: {
      $route: (value) => {
        console.log('ROUTE CHANGED');
        console.log(value); /* Route Object */
        console.log(this); /* NOT A VueComponent */
        this.pageTitle = 'Some new title';
      },
    },
  };
</script>

不确定这种方法是否正确，或者我遗漏了什么

任何帮助都将不胜感激

---

提前感谢。

不要使用箭头函数定义监视处理程序（或方法、计算值或生命周期方法等）。箭头函数按词汇绑定此，并且不能重新绑定

相反，只需使用常规函数即可。Vue将其绑定到Vue

watch:{
  $route: function(value){
    console.log('ROUTE CHANGED');
    console.log(value); /* Route Object */
    console.log(this); /* NOT A VueComponent */
    this.pageTitle = 'Some new title';
  }
},

watch:{
  $route: function(value){
    console.log('ROUTE CHANGED');
    console.log(value); /* Route Object */
    console.log(this); /* NOT A VueComponent */
    this.pageTitle = 'Some new title';
  }
},