The main. Ts
The import Vue from 'Vue';
Import from App './App. Vue ';
Import the router from '/router';
Import store from '/store';
The import {Component} from 'vue - property - decorators';

Vue. Config. ProductionTip=false;
Component. RegisterHooks ([
'beforeRouteEnter'
'beforeRouteLeave'
'beforeRouteUpdate'
]);
New Vue ({
The router,
Store,
Render: (h)=& gt; H (App),
}). $mount (' # app);

The HelloWorld. Vue


<script lang="ts" & gt;
The import {Component, Vue} from 'Vue - property - decorators';

@ Component
Export the default class HelloWorld extends the Vue {

Private the replace () {
This $router. Push ('/about)
}

BeforeRouteEnter: (to the Route, the from: the Route, next: ()=& gt; Void) : void {
The console. The log (this, 'beforeRouteEnter);
next();
}
BeforeRouteUpdate: (to the Route, the from: the Route, next: ()=& gt; Void) : void {
The console. The log (this, 'beforeRouteUpdate);
next();
}
BeforeRouteLeave: (to the Route, the from: the Route, next: ()=& gt; Void) : void {
The console. The log (this, 'beforeRouteLeave);
next();
}
}
</script>

According to the official recommended way to write, but routing switching, routing hook is not effective, the mian. Using the vue ts - class - component replacement vue - property - not a decorator, strange,,,

CodePudding user response:

Do you want to use routing hook function need to make sure that you use hook function components is through the routing load

CodePudding user response:

Because of using the asynchronous components?