Vue 问题笔记 vue-router单页面应用跳转路由时触发事件

在使用vue-router时，我们可以很方便地实现单页面应用，当我们想要跳转到“另一个页面”的时候，只要调用vue-routerAPI中的方法，传入相应的路由作为参数即可。

单页面应用的一个特点是，如果某个路由已经在本地加载过了，即已经将生命周期走到了mounted的时候，如果我们再进入这个页面，不会再执行created和mounted里面的方法。

简单来说，有两个页面A和B，我们使用单页面的形式，使用vue-router来实现页面的“跳转”，当我们一开始打开A页面时，执行了页面的created和mounted，跳转到B页面，执行了B页面的created和mounted，但是，当我们从B页面“跳转”回A页面时，我们发现不会执行created和mounted了，因为这个Vue组件已经加载了，它不会重复执行方法，如果我们要在路由发生变化的时候执行方法，那我们就需要监听$route的变化，在它变化的时候执行方法。

在Vue的官方文档中，直接在监听后传入一个方法对应的字符串，在路由发生变化的时候自动执行方法

watch: {
    // 如果路由有变化，会再次执行该方法
    '$route': 'fetchData'
  },
methods: {
    fetchData () {
      this.error = this.post = null
      this.loading = true
      // replace getPost with your data fetching util / API wrapper
      getPost(this.$route.params.id, (err, post) => {
        this.loading = false
        if (err) {
          this.error = err.toString()
        } else {
          this.post = post
        }
      })
    }
  }

当然，如果我们要通过判断路由发生的特定变化来执行方法，可以使用handler

watch:{
  "$route":{
    handler(route){
      const that=this;
      if(route.name=='Hello'){
        that.fetchData();
      }
    }
  }
}

这样子就会针对路由的值来执行方法了。