javascript - call a function every time a route is updated vue.js - Stack Overflow

admin管理员组

文章数量:1201202

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

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

• javascript
• vuejs2
• vue-component
• vue-router
• intercom

Share Improve this question Follow asked Aug 10, 2017 at 0:26 CostantinCostantin 2,64688 gold badges3434 silver badges5252 bronze badges 13

• 1 You could try watching the $route object in your Vue instance. – Phil Commented Aug 10, 2017 at 0: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 Commented Aug 10, 2017 at 0: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 Commented Aug 10, 2017 at 0:42
• why not just add a mounted hook to App.vue. All the other components are children to the App.vue – Kamga Simo Junior Commented Aug 10, 2017 at 0:44
• 1 @KamgaSimoJunior @Phil the watch worked perfectly. Thanks. – Costantin Commented Aug 10, 2017 at 0:53

 |  Show 8 more comments

3 Answers 3

Sorted by: Reset to default 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')
    }
  }
})

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

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

本文标签： javascriptcall a function every time a route is updated vuejsStack Overflow