Setting up in-Component Hooks

Finally, we can also use in-component Hooks as component life cycle Hooks where we want to scope those Hooks to component-level for better code maintenance or enhance the workflow where the same component needs to behave differently in a certain use case.

We can have the About component now with the beforeRouteEnter() Hook defined as follows:

<script>
export default {
  data() {
    return {
      user: ''
    }
  },
  beforeRouteEnter(to, from, next) {
    if (!to.params || !to.params.user) {
      next(comp => {
        comp.user = 'Alex'
      })
    }
    else {
      next();
    }
  }
}
</script...