keyword:ts、路由監(jiān)聽、router炸站、beforeRouterEnter、beforeRouterLeave
在js中需要監(jiān)聽路由的變化時(shí)疚顷，我們可以通過全局路由守衛(wèi)旱易、組件內(nèi)的beforeRouterEnter、beforeRouterLeaver等來監(jiān)聽路由的變化腿堤。那么當(dāng)我們?cè)趖s中是如何做到的呢阀坏，起初我也是用了這幾個(gè)方法、但是發(fā)現(xiàn)beforeRouterLeaver等鉤子并不支持笆檀。
解決方法一
1.Watch監(jiān)聽
import { Component, Vue, Watch } from 'vue-property-decorator'
@Watch('$route')
routechange(to: any, from: any) {
console.log(to, from)
}
解決方法二
2.beforeRouterEnter
剛剛說到在js中可以用這個(gè)鉤子監(jiān)聽忌堂、實(shí)際上ts也可以用的。當(dāng)然先對(duì)鉤子進(jìn)行注冊(cè)
- 在main.ts中配置
import { Component } from 'vue-property-decorator'
Component.registerHooks([
'beforeRouteEnter',
'beforeRouteLeave',
'beforeRouteUpdate',
]);
- 在頁(yè)面內(nèi)使用
public beforeRouteLeave(to: any, from: any, next: any) {
next()
}
當(dāng)然误债，在注冊(cè)組件時(shí)浸船，你也可以像這樣引用；兩種我都測(cè)試過了寝蹈，都可監(jiān)聽到.在這里解釋下李命，兩者有什么區(qū)別哈。
vue-class-component是官方出品箫老、vue-property-decorator是社區(qū)出品封字，是基于vue-class-component開發(fā)而成的，拓展出了很多操作符@Prop耍鬓、@Emit等等阔籽。當(dāng)然你在開發(fā)時(shí)用了vue-property-decorator，就可不必再?gòu)膙ue-class-componentyin引入vue牲蜀、Component
import Component from 'vue-class-component'
Component.registerHooks([
'beforeRouteEnter',
'beforeRouteLeave',
'beforeRouteUpdate',
]);
通過上面操作笆制，是能監(jiān)聽到路由的變化的。但是一些同學(xué)會(huì)出現(xiàn)涣达，有時(shí)候監(jiān)聽到在辆、有時(shí)候又監(jiān)聽不到的情況。那你就要看下是否是異步組件了
