9

I have a component that contains router-links to the same route, but with a different parameter. When navigating to those links, the url changes but the data isn't updating. I have beforeRouteUpdate defined, but it is never called.

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

3 Answers 3

10

Just ran into this issue myself 2 years after the question was asked but in addition to Simsteve7's answer I need to place that code inside it's own file

// router/componentHooks.ts

import Component from "vue-class-component";

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

Then over in main.ts the very first line you import that in.

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

Before I just had the component's calls within mounted and was getting the slug through this.$route.params. Instead of that I put everything within mounted in it's own function and then called that from mounted using this.$route.params and beforeRouteUpdate's to.params. So for an example:

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

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

6

Since there is still no answer, I'll post a possible issue.

Make sure to register the beforeRouteUpdate hook before initializing Vue.

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

new Vue({...});
2
  • in index.ts rather than .vue file?? Commented Jul 14, 2019 at 9:30
  • Thank you Erik and Simsteve7, that helped. First I thought the issue in SSR that I've used and tried to search info on VueRouter docs. But then I found this question and understood that the issue is in the typescript (also described here github.com/vuejs/vue-class-component#adding-custom-hooks )
    – gorodezkiy
    Commented Aug 1, 2019 at 20:54
0

If someone ends up here using > vue-class-component@^8.0.0-rc.1 the following code can be used:

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

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.