带有路由的 Vuejs 助手

Question

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

组件内的函数：

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

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

Answer 1

您可以将函数添加到 mixin (https://vuejs.org/v2/guide/mixins.html)

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],
  ...
}

Answer 2

考虑到您提到它在您的应用程序中经常使用，您可以向您的 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'})