Vue.js router not calling beforeRouteUpdate (typescript)

Question

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

rball · Accepted Answer · 2020-04-04 22:16:01Z

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

Steve Maris · Accepted Answer · 2019-05-06 12:32:20Z

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

answered May 6, 2019 at 12:32

Steve Maris

1,01611 silver badges16 bronze badges

2 Comments

Exile3daime Over a year ago

in index.ts rather than .vue file??

gorodezkiy Over a year ago

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 )

Kristofer · Accepted Answer · 2022-03-30 08:34:41Z

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"
]);

answered Mar 30, 2022 at 8:34

Kristofer

8739 silver badges17 bronze badges

Collectives™ on Stack Overflow

Vue.js router not calling beforeRouteUpdate (typescript)

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related