beforeRouteUpdate and beforeRouteLeave never called

Ionic Framework Ionic Vue
1

“beforeRouteUpdate” and “beforeRouteLeave” in-component guards are never being called.

I tried using them in my route component and in my App.vue.
Nothing…

“beforeRouteEnter” works fine.

I navigated to other routes both by pressing the back button and by using “router.push” and “<router-link>”.
None of those called the guards.

My end goal is to use the mentioned guards to navigate to a previous step of a multi-step form when pressing the back button.

I am completely lost, spent hours on this. My app is pretty big so tell me which part of the code you would need to see.

2

Hard to say what the issue is without being able to reproduce it myself. Can you provide a GitHub repo?

3

I tried to do it in a fresh Ionic Vue app with blank template and still no success.

Here’s the repo for that: dftd/IonicVue-beforerouteleave · GitHub

4

Thanks! This looks like a bug in Ionic Vue. I have prepared a fix for this. Can you try the following dev build, and let me know if it resolves the issue?

npm install @ionic/vue@5.7.0-dev.202108252139.e1c36f6 @ionic/vue-router@5.7.0-dev.202108252139.e1c36f6
5

Thanks a lot! This seems to work great! Finally can finish that form I’ve been working on. :smiley:

Is it safe to use your build for production or shall I wait for an “official” update?

6

Not sure is this expected behavior. But I noticed that this in beforeRouteLeave seems to be, wrong? I cannot access any methods or properties of the component.

console.log(this);

beforeRouteEnter: ƒ async beforeRouteEnter(to, from, next)
beforeRouteLeave: ƒ beforeRouteLeave(to, from, next)
components: { IonCard: {…}, ... }
computed: { categoryById: ƒ, ... }
created: ƒ created()
data: ƒ data()
methods: { countryChange: ƒ, ... }
render: ƒ render(_ctx, _cache, $props, $setup, $data, $options)
__file: "src/pages/item/Form.vue"
__hmrId: "55af788c"
[[Prototype]]: Object
7

Good catch! This dev build should fix that:

npm install @ionic/vue@5.7.0-dev.202108252303.c93c4cd @ionic/vue-router@5.7.0-dev.202108252303.c93c4cd

I would not recommend using the development build in production, but feel free to keep working with it in your local environment. This fix will be in an upcoming release of Ionic Framework, and we release roughly every 2 weeks.

8

That did it! Big thanks again!

1 Like