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

Posted 2023-02-16

【中文标题】每次更新路由时调用一个函数 vue.js

【英文标题】：call a function every time a route is updated vue.js

【发布时间】：2018-01-18 01:09:40

【问题描述】：

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

我知道我可以将它添加到mounted()，但我宁愿不修改我的所有组件，而是直接使用navigation guards 来完成。 （主要是为了避免在 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
)

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

是否有一个钩子在 url 更改时运行？ 我该怎么做？

谢谢

【问题讨论】：

您可以在 Vue 实例中尝试 watching the $route object。

@thanksd 我说它还没有改变，因为在第 3 行 console.log(window.location.href ) 打印了以前的 url。例如从家里我点击 /about，它打印 home，然后我点击 /team 它打印 /about 等

@Phil 你的意思是在我的基础组件中添加一个观察者？这可以工作.. 我通常会尽量避免观察者，但在这里它可能是有意义的

为什么不给 App.vue 添加一个挂载的钩子。所有其他组件都是 App.vue 的子组件

@KamgaSimoJunior @Phil watch 工作得很好。谢谢。

【参考方案1】：

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

尝试watching the $route object 进行更改

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

【讨论】：

参数的顺序应该to, from，否则正是我要找的。​​span>

@Jonas 他们只是名字，但你是对的，论点应该颠倒过来。将修复

对我来说，观看`'$route'` 没有检测到变化，但$route 检测到了。我的意思是我必须删除引号。

@YeasirArafatMajumder 根本不应该有任何区别

【参考方案2】：

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

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

【讨论】：

我建议不要使用此解决方案。如果您使用每个路由一个组件的简单实现，这可能会起作用，但是使用此方法，mounted() 事件将附加到每个组件，因此如果您在路由中有一个或多个子组件，该事件将运行一次他们每个人。这可能会导致您的应用程序出现意外和无法控制的行为。