javascript - 每次更新路由时调用一个函数 vue.js

Question

window.Intercom('update');我在我的应用程序中集成了对讲机，每次我的网址更改时我都需要打电话。

我知道我可以添加它，mounted()但我宁愿不修改我的所有组件，而是直接使用导航守卫来完成。（主要是为了避免在 10 个不同的地方有相同的代码。

目前我有：

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

这intercom('update')在更改 url 之前运行，而我需要在 url 更改后运行它。

是否有一个仅在 url 更改时运行的钩子？我怎样才能做到这一点？

谢谢

Answer 1

不确定这是否会起作用，因为您已经拥有的似乎应该没问题，但是这里...

尝试观察$route对象的变化

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

Answer 2

我刚刚提出了 Phil 之外的另一个解决方案，您也可以使用Global Mixin。它将其方法或生命周期挂钩合并到每个组件中。

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