[Vue + TS] Using Route events inside Vue

<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‘);
  }
}

<template>
    <div>
        <h3>HelloTs</h3>
        <router-link to="/">Hello</router-link>
    </div>
</template>
<script lang="ts">

import Vue from ‘vue‘
import Component from ‘vue-class-component‘

@Component({})
export default class HelloTs extends Vue {
    created() {
        console.log("HelloTs created!")
    }
    beforeRouteEnter(to, from, next) {
        console.log("HelloTs: beforeRouteEnter")
        next()
    }

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

import Component from ‘vue-class-component‘

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

// 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 }
})