在使用vue-router时,咱们能够很方便地实现单页面应用,当咱们想要跳转到“另外一个页面”的时候,只要调用vue-routerAPI中的方法,传入相应的路由做为参数便可。javascript
单页面应用的一个特色是,若是某个路由已经在本地加载过了,即已经将生命周期走到了mounted的时候,若是咱们再进入这个页面,不会再执行created和mounted里面的方法。vue
简单来讲,有两个页面A和B,咱们使用单页面的形式,使用vue-router来实现页面的“跳转”,当咱们一开始打开A页面时,执行了页面的created和mounted,跳转到B页面,执行了B页面的created和mounted,可是,当咱们从B页面“跳转”回A页面时,咱们发现不会执行created和mounted了,由于这个Vue组件已经加载了,它不会重复执行方法,若是咱们要在路由发生变化的时候执行方法,那咱们就须要监听$route的变化,在它变化的时候执行方法。java
在Vue的官方文档中,直接在监听后传入一个方法对应的字符串,在路由发生变化的时候自动执行方法vue-router
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
}
})
}
}
固然,若是咱们要经过判断路由发生的特定变化来执行方法,能够使用handlerapp
watch:{
"$route":{
handler(route){
const that=this;
if(route.name=='Hello'){
that.fetchData();
}
}
}
}
这样子就会针对路由的值来执行方法了。post