[Vuejs]-Vuejs helper with route

by

1👍

You can add the function into a mixin (https://v2.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],
  ...
}
👤IVO GELOV

0👍

Considering you mention this to be used often across your app, you can add a new method to your Vue router instance.

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

And then, in your component code, you can use it like

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

Or, you can import just the method like:

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

Leave a comment