Vue.js 路由器不调用 beforeRouteUpdate（打字稿）

Question

我有一个组件，其中包含指向同一路由的路由器链接，但参数不同。导航到这些链接时，url 会发生变化，但数据不会更新。我定义了 beforeRouteUpdate，但它从未被调用。

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

Answer 1

由于仍然没有答案，我会post一个可能的问题。

确保在初始化 Vue 之前注册 beforeRouteUpdate 钩子。

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

new Vue({...});

Answer 2

在问题被问到 2 年后，我自己运行自己解决了这个问题，但除了 Simsteve7 的回答之外，我还需要将该代码放在它自己的文件中

// router/componentHooks.ts

import Component from "vue-class-component";

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

然后在 main.ts 导入的第一行。

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

在我刚刚挂载组件调用并通过 this.$route.params 获取 slug 之前。取而代之的是，我将所有东西都放在它自己的函数中，然后使用 this.$route.params 和 beforeRouteUpdate 的 to.params 从 mounted 中调用它。例如：

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

来源：https://class-component.vuejs.org/guide/additional-hooks.html

Answer 3

如果有人在这里使用 > vue-class-component@^8.0.0-rc.1 可以使用以下代码：

import { Vue } from "vue-class-component";

Vue.registerHooks([
    "beforeRouteEnter",
    "beforeRouteLeave",
    "beforeRouteUpdate"
]);

Vue.js 路由器不调用 beforeRouteUpdate（打字稿）

Vue.js router not calling beforeRouteUpdate (typescript)

typescript

vue-router

vue-component

vuejs2