Vue.js 带路由的Vuejs帮助程序

我有一个在整个应用程序中都使用的功能。 我想将此函数导出到一个模块，并在需要时导入

组件内部的功能：

navigate: debounce(function() {
  this.$router.push({
    path: '/cars',
    query: this.params
  })
}, 200)

---

如何将此函数导出到模块并在组件上使用？

您可以将此函数添加到mixin（）中

funcs.js：

export default
{
  methods:
  {
    navigate()
    {
      debounce(() =>
      {
        this.$router.push({
          path: '/cars',
          query: this.params
        });
      }, 200);
    }
  }
}

component.vue：

import funcs from './funcs.js'

export default
{
  ...
  mixins: [funcs],
  ...
}

---

考虑到您提到的这一点在应用程序中经常使用，您可以向Vue路由器实例添加一个新方法

const router = new VueRouter({
  routes 
})


// Create and export a pass-through API so you can use it just like router.push
export const debouncedPush = debounce(router.push, 200);

// Add debouncedPush method on the router
router.debouncedPush = debouncedPush

const app = new Vue({
  router
}).$mount('#app') 

然后，在组件代码中，您可以像

this.$router.debouncedPush({path: '/cars', query: this.params})

或者，您可以只导入以下方法：

import { debouncedPush } from './path/to/file'
debouncedPush({path: '/cars'})

---

这看起来像是一个类的一部分，而不是一个独立函数。有没有方法可以使debouncedPush和router.push同时工作？添加

debouncedPush

不会以任何方式影响

router.push

。您可以独立使用这两种方法。（我假设您正在使用的

去公告

实现创建了一个新的包装函数并返回它（不影响底层函数））