A vue-property-decorator based @Component decorator argument for using TypeScript in Vue

The @Component decorator accepts an object (Options :ComponentOptions = {}) as an argument. Vue-property-decorator is declared like this:

declare module 'vue/types/options' { interface ComponentOptions<V extends Vue> { router? : VueRouter beforeRouteEnter? : NavigationGuard<V> beforeRouteLeave? : NavigationGuard<V> beforeRouteUpdate? : NavigationGuard<V> } }Copy the code

This shows that @Component takes an object that can pass the optional router and the Vue navigation guards beforeRouteEnter, beforeRouteUpdate, and beforeRouteLeave. Vue-router Navigation Guard [official document] Navigation indicates that the route is being changed. A navigational guard is one that watches for components or pages to enter, modify, leave, and guard navigation by jumping or canceling.

The guard hook accepts three arguments:

  • To: Route: indicates the destination Route to be entered. Where to go
  • From: Route: indicates the Route that the current navigation is about to leave. Where are from
  • Next: NavigationGuardNext: Be sure to call this method to resolve the hook. The execution depends on the call parameters of the next method. What to do
    • Next (): Goes to the next hook in the pipe. If all hooks are executed, the navigation state is confirmed.
    • Next (false): interrupts current navigation. If the browser URL changes (either manually by the user or by the browser back button), the URL is reset to the address corresponding to the FROM route.
    • Next (‘/’) or next({path: ‘/’}): jumps to a different address. The current navigation is interrupted and a new navigation is performed. You can pass any location object to next, and you can set options like replace: True, name: ‘home’, and any options used in router-link’s to prop or router.push.
    • Next (error): (2.4.0+) If the argument passed to Next is an error instance, the navigation is terminated and the error is passed to the callback registered with router.onerror ().

** Ensures that the next function is called exactly once in any given navigational guard.

//Home.vue <template> <div class="home"> <h1>{{ title }}</h1> <HomeComponent msg="Hello World" /> </div> </template> <script lang="ts"> import { Vue, Component } from "vue-property-decorator"; / / import Component decorator import HomeComponent from "@ / components/HomeComponent. Vue"; Import {NavigationGuardNext, Route} from "vue-router"; import {NavigationGuardNext, Route} from "vue-router"; @Component({ components: { HomeComponent, }, beforeRouteEnter(to: Route, from: Route, next: NavigationGuardNext) {// NavigationGuardNext is called to navigate to the corresponding route of the component, or to jump from another page to the current page console.log("*****Home***Enter*****"); console.log("beforeRouteEnter", this); //undefined console.log("to", to); console.log("from", from); next((vm: any) => { console.log(vm); // vm is the instance of the current component, equivalent to this because the component instance has not been created before the beforeRouteEnter hook is executed. // So you need to pass a callback to next to access the component instance. // A title variable is defined below, Let's change this parameter and try vm._data.title = "vmHomeTitle"; // do not know if this operation is correct, compile and run without error and warning, ^_^}); }, beforeRouteUpdate(to: Route, from: Route, next: NavigationGuardNext) {// For a path with dynamic parameters /home/:id, // because the same home component is rendered between // 1 and // 2, So component instances are reused. And the hook will be called in that case. / / can access the current component instance this console, log (" * * * * * Home * * * Update * * * * * "); console.log("Update", this); // Current component instance console.log("to", to); console.log("from", from); console.log("next", next); // Note that beforeRouteEnter is the only guard that supports passing a callback to next. // For beforeRouteUpdate and beforeRouteLeave, this is already available, so passing callbacks are not supported because they are not necessary. next(); }, beforeRouteLeave(to: Route, from: Route, next: NavigationGuardNext) {// NavigationGuardNext is called when navigation leaves the corresponding route of the component, or can be seen as a jump from the current page to another page // Can access the current component instance this console.log("*****Home***Leave*****"); console.log("Leave", this); // Current component instance console.log("to", to); console.log("from", from); console.log("next", next); // This exit guard is usually used to prevent users from leaving abruptly before saving their changes. // This navigation can be cancelled by next(false). const answer = window.confirm( "Do you really want to leave? you have unsaved changes!" ); if (answer) { next(); } else { next(false); } }, }) export default class Home extends Vue { private title = "HomeTitle"; } </script>Copy the code
//HomeComponent.vue <template> <h1>{{ msg }}</h1> </template> <script lang='ts'> import { Component, Vue, Prop } from "vue-property-decorator"; @Component export default class HomeComponent extends Vue { @Prop() private msg! : string; } </script> <style scoped> </style>Copy the code

** Original content, sorting is not easy, reprint please indicate the source!! Thanks for your cooperation. 六四屠杀