$router没有定义的问题

项目场景：

在页面元素绑定跳转路由跳转是常用的功能

---

问题描述和解决办法

以往在页面中给页面元素绑定跳转路由功能，是在HTML元素中直接使用@click=“$router.push(‘/setting/recruitment’)”，代码如下：

<li class="list-li1">
  <div class="li-title-container">
    <span class="list-title">招聘发布</span>
    <div class="list-count" @click="$router.push('/setting/recruitment')">5</div>
  </div>
</li>

现在我想定义一个方法去进行路由的跳转，则报错[Vue warn]: Error in v-on handler: “ReferenceError: $router is not defined”，经过一番尝试之后，才发现我忘记加上this了。给它加上this之后就正确解决问题了。代码如下：

methods: {
    
    
  goRouter(url) {
    
    
    this.$router.push(url)
  }
},

---

原因分析：

在我们使用框架时，很多属性和方法会挂在this中，这是常用的技巧。在methods属性中输出this可以看到他里面包含$router的内容。

这里不得不说下 vue中this的指向问题
箭头函数的this指向的是vueComponent实例对象
普通函数的this指向的是调用者Vue实例对象
组件方法中的this是当前组件