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

在使用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