[Vue + TS] Using Route events inside Vue

Vue.

Default component:

<template>
  <div class="hello">
    <h1>{{ message }}</h1>
    <button @click="clicked">Click</button>
    <router-link to="/hello-ts">Hello Ts</router-link>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'

@Component({})
export default class Hello extends Vue {
  message: string = 'Welcome to Your Vue.js App'

  get fullMessage() {
    return `${this.message} from Typescript`
  }

  created() {
    console.log('created');
  }

  beforeRouteEnter(to, from, next) {
    console.log("Hello: beforeRouteEnter")
    next()
  }

  beforeRouteLeave(to, from, next) {
    console.log("Hello: beforeRouteLeave")
    next()
  }

  clicked() {
    console.log('clicked');
  }
}

 

Create a second component:

<template>
    <div>
        <h1>Hello Ts</h1>
        <router-link to='/'>Hello Vue</router-link>
    </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import Route from 'vue-router';

@Component({})
export default class HelloTs extends Vue{
    created() {
        console.log("Hello TS created")
    }

    beforeRouteEnter(to: Route, from: Route, next: Function) {
        console.log("beforeRouteEnter")
        next();
    }

    beforeRouteLeave(to: Route, from: Route, next: Function) {
        console.log("beforeRouteLeave")
         next();
    }
}
</script>

Checkout Doc

 

There are tow route events, "beforeRouteEnter" and "beforeRouteLeave", each lifecycle hooks accepts three params "to, from , next", just like middlewares in nodejs, we need to call "next()" to make everything works.

 

Also we need to register the route link before using Vue.

hooks.ts:

import Component from 'vue-class-component'

Component.registerHooks([
    'beforeRouteEnter',
    'beforeRouteLeave'
])

 

main.ts:

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.

import './hooks'

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})