vuejs2 - Vue.js router no llama a beforeRouteUpdate (typescript)

Tengo un componente que contiene enlaces de enrutador a la misma ruta, pero con un parámetro diferente. Al navegar a esos enlaces, la URL cambia pero los datos no se actualizan. Tengo beforeRouteUpdate definido, pero nunca se llama.

import Vue from 'vue';
import { Component } from 'vue-property-decorator';
@Component
export default class AccountComponent extends Vue {
    address: string;
    account: Account;

    data() {
        return {
            account: null
        }
    }

    beforeRouteUpdate(to: any, from: any, next: any) {
        console.log('beforeRouteUpdate for ' + to.params.address);
        next();
    }

    mounted() {
        this.address = this.$route.params.address;
        this.loadData();
    }

    loadData() {
        console.log('Fetching data for ' + this.address);
        fetch('api/Account/Get?address=' + this.address)
            .then(response => response.json() as Promise<Account>)
            .then(data => {
                this.account = data;
            });
    }
}

Respuesta #1

Me encontré con este problema yo mismo 2 años después de que se hiciera la pregunta, pero además de la respuesta de Simsteve7, necesito colocar ese código dentro de su propio archivo

// router/componentHooks.ts

import Component from "vue-class-component";

// Register the router hooks with their names
Component.registerHooks([
    "beforeRouteEnter",
    "beforeRouteLeave",
    "beforeRouteUpdate"
]);

Luego, en main.ts, en la primera línea importas eso.

import './router/componentHooks' // <-- Needs to be first
import Vue from "vue";
import App from "./App.vue";
import router from "./router";

Antes solo tenía las llamadas del componente dentro de mounted y obtenía el slug a través de this.$route.params. En lugar de eso puse todo dentro de mounted en su propia función y luego llamé a eso desde mounted usando this.$route.params y to.params de beforeRouteUpdate. Así que, por ejemplo:

  async mounted() {
        await this.loadPage(this.$route.params.id)
  }

  async beforeRouteUpdate(to, from, next) {
        console.log(`beforeRouteUpdate ${to.params.id}`)
        await this.loadPage(to.params.id)
    next()
  }

  async loadPage(id) {
    //...
  }

Fuentes: https://class-component.vuejs.org/guide/additional-hooks.html

Respuesta #2

Dado que todavía no hay respuesta, publicaré un posible problema.

Asegúrate de registrar el hook beforeRouteUpdate antes de inicializar Vue.

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

new Vue({...});