call a function every time a route is updated vue.js

Question

I have integrated intercom in my app and I need to call window.Intercom('update'); every-time my url changes.

I know I could add it on mounted() but I rather not modify all my component and do it directly using the navigation guards. (Mainly to avoid to have the same code in 10 different places.

At the moment I have:

router.afterEach((to, from) => {
  eventHub.$off(); // I use this for an other things, here is not important
  console.log(window.location.href ) // this prints the previous url
  window.Intercom('update'); // which means that this also uses the previous url
})

This runs intercom('update') before changing the url, while I need to run it after the url changes.

Is there a hook which runs just when the url has changed? How can I do this?

Thanks

You could try [watching the `$route` object](https://router.vuejs.org/en/essentials/dynamic-matching.html#reacting-to-params-changes) in your `Vue` instance. — Phil, Aug 10 '17 at 00:37
@thanksd I'm saying that it hasn't yet changed because on line 3 the `console.log(window.location.href )` print the previous url. e.g. from home I click on /about, it prints home, then I click on /team it prints /about etc — Costantin, Aug 10 '17 at 00:39
@Phil you mean adding a watcher in my base component? this could work.. I just usually try to avoid watchers, but here it might make sense — Costantin, Aug 10 '17 at 00:42
why not just add a mounted hook to App.vue. All the other components are children to the App.vue — Kamga Simo Junior, Aug 10 '17 at 00:44
@KamgaSimoJunior because I would have the same code in 7 different places and I would have to remember to add it every-time I make a new component/page, not super efficient — Costantin, Aug 10 '17 at 00:45
@KamgaSimoJunior Vue components inherit nothing from their parents — Phil, Aug 10 '17 at 00:48
@Phil I mean each time you navigate to a component, the parent component is also mounted. — Kamga Simo Junior, Aug 10 '17 at 00:49
@KamgaSimoJunior @Phil the `watch` worked perfectly. Thanks. — Costantin, Aug 10 '17 at 00:53
I agree with Phil, watching $route in the vue instance seems to be the best solution. — choasia, Aug 10 '17 at 00:54
@Phil feel free to add it as a correct answer. It might help others and it will be more visible than these comments. Thank You. — Costantin, Aug 10 '17 at 00:55
ok great! but am sure the mounted hook on the App.vue will also work because I have been using it — Kamga Simo Junior, Aug 10 '17 at 00:55

Phil · Accepted Answer · 2019-05-15T05:31:15.777

21

Wasn't sure this would work as what you already have seems like it should be fine but here goes...

Try watching the $route object for changes

new Vue({
  // ...
  watch: {
    '$route': function(to, from) {
      Intercom('update')
    }
  }
})

edited May 15 '19 at 05:31

answered Aug 10 '17 at 00:59

Phil

157,677
23
242
245

2

the order of the params should `to, from`, otherwise exactly what I was looking for. – Jonas Feb 22 '19 at 08:02
@Jonas they're just names but you're right, the arguments should be reversed. Will fix – Phil May 15 '19 at 05:30
for me, watching` '$route'` did not detect the changes, but `$route` did. I meant i had to remove the quotes. – Yeasir Arafat Majumder May 21 '19 at 06:01
@YeasirArafatMajumder shouldn't make any difference at all – Phil May 21 '19 at 06:04

score 2 · Answer 2 · edited Jul 15 '22 at 22:50

2

I just came up with another solution beyond Phil's, you could also use Global Mixin. It merges its methods or lifecycle hooks into every component.

Vue.mixin({
  mounted() {
    // do what you need
  }
})

edited Jul 15 '22 at 22:50

tony19

125,647
18
229
307

answered Aug 10 '17 at 01:14

choasia

10,404
6
40
61

I would advise against this solution. This may work if you're using a simple implementation with one component per route, however with this method the mounted() event will get attached to every component, so if you have one or many subcomponents in a route the event will run once for each of them. This will likely result in unintended and uncontrollable behavior in your application. – Eric Uldall Oct 21 '19 at 22:05

score -1 · Answer 3 · edited Sep 24 '22 at 05:44

-1

created() {
    this.$watch(
      () => this.$route.params,
      () => /*Your Function*/
    );
  },

edited Sep 24 '22 at 05:44

Ian Campbell

23,484
14
36
57

answered Sep 17 '22 at 22:41

Mohamed El Sayed

1
1

1

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Sep 22 '22 at 04:10

call a function every time a route is updated vue.js

3 Answers3

Linked