[Vuejs]-Vue. How to route on current page

by

0👍

Don’t reload the page if you do not have to.

this.$route.query can be just as reactive as your other data, so use this fact.

export default {
  name: 'Users',
  watch: {
    '$route.query': {
      immediate: true,
      deep: true,
      handler (queryParams) {
        this[GET_USERS_FROM_SERVER](queryParams)
      }
    }
  },
  methods: {
    ...mapActions([GET_USERS_FROM_SERVER]),
    onBtnFilterClick () {
      this.$route.push('/users?minAge=20&name=alex&withPhoto=true')
    }
  }
}

When you watch for changes on $route.query, you call this[GET_USERS_FROM_SERVER] whenever it changes. I suspect that this changes the data in your component. I’ve set the immediate flag to run it when the component is created. I’ve set the deep flag, because this is an object, and I am not entirely sure if the query object gets replaced with every route change, or just modified. The deep flag will make sure that it will always trigger the handler.

Leave a comment