我用vue-cli 监听路由变化，可是为什么不进这个监听函数啊？

Question

题目描述

我用vue-cli 监听路由变化，可是为什么不进这个监听函数啊？

题目来源及自己的思路

首先我用watch监听路由变化，想得到他的上一个跳转路由名称，但始终进入不了路由监听函数，得不到from里面的参数，后来我就想着用beforeRouteEnter这个函数，虽然得到了from里面的路径，但是不能操作data里面的数据啊，打印出来的this为undefined,求大神指教

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）
watch: {

$route: {
  handler (val, oldval) {
    console.log(val) // 新路由信息
    console.log(oldval) // 老路由信息
  },
  // 深度观察监听
  deep: true
}

},

beforeRouteEnter (to, from, next) {

  console.log('to:', to)
  console.log('from:', from)
if (from.fullPath === '/trackCoupon') {
    this.products = []
  console.log('this:', this) // 打印出来的this为undefined
}
  next()

},

你期待的结果是什么？实际看到的错误信息又是什么？

Answer 1

参考文档Vue router组件内的守卫

beforeRouteEnter 守卫 不能 访问 this，因为守卫在导航确认前被调用,因此即将登场的新组件还没被创建。

操作this如果要操作后面的组件， 在next的回调中调用即可