Vue项目路由参数改变，接口没有重新调用

---

前言

Vue项目路由参数改变，接口没有重新调用

---

一、先上解决方案

在watch里面添加一个【’$route’】的方法

  watch: {
    // 深度监听路由改变事件
    '$route': {
      handler () {
      	// 这里的this.initData()就是自己项目接口调用的方法，可以根据自己的项目修改成对应的方法
        this.initData()
      },
      deep: true,
      immediate: true,
    }
  },

二、简单讲解

1.常用到的地方

像项目中有这种情况，分类页的路由是www.xxx.com/category?categoryId=xxx。
然后你再次点击分类，路由里面的参数categoryId变了，但是你调用的时候其实只是参数变更，路由并没有变更。
这样就会造成原来的组件实例会被复用。因为渲染的都是同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用，所以就导致数据没有变化

2.watch中的【’$route’】

watch是一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个属性。

这是vue官方文档的介绍：vue官方文档的路由挂钩

上面已经介绍了现在只是参数变更，路由并没有变更，组件实例会被复用，所以就造成了页面数据无法更新，所以就需要在
watch里面调用【’$route’】的方法，重新获取实例。这样就能正确刷新页面了

3.完整的代码

  created () {
    this.initData()
  },
  methods: {
  	// 在这里调用页面加载时的事件
    initData () {
      this.xxx()
    },
  },
  watch: {
    // 深度监听路由改变事件
    '$route': {
      handler () {
        this.initData()
      },
      deep: true,
      immediate: true,
    }
  },

总结

基本介绍就是这些了，要是文章中有什么错误或者问题，欢迎评论。我会及时做出修正或者回答，谢谢