CODEWITHSUNDEEP
vue.jsroutesnuxt.js
24sharon
24sharon

Reputation: 1975

Nuxt add parameters without page and without reload the page

I have a page with big list of data and some buttons for filtering.

for example 2 buttons to filter by status:

I want when the user clicked on the complete the url to be changed to

http://demo.com/list?filter=complete

the page does not reloading, it just for get specific url foreach filter button.

How can I implement the code in Nuxt application?

Upvotes: 3

Views: 8427

Answers (3)

zia
zia

Reputation: 278

first create this helper function

export function getAbsoluteUrl(to) {
  const path = $nuxt.$router.resolve(to).href
  return window.location.origin + path
}

this is example for my tabs

  watch: {
    tab(value) {
      if (!process.server) {
        const url = getAbsoluteUrl({
          params: { ...this.$route.params, activeTab: value }
        })
        history.replaceState({}, null, url) // or use your own application logic: globalSiteUrl, $route... or queryString some vars...
      }
    }
  },

Upvotes: 1

soroush
soroush

Reputation: 756

At first you should change your route with "$route.push" or click on these ways change the route without reloading

After than you can use "pages watchquery" to handle event of changing route https://nuxtjs.org/api/pages-watchquery/

Upvotes: 1

ManUtopiK
ManUtopiK

Reputation: 4724

You cannot use $route or $router to change url, it set a new html5 history state and reload the page. So, to change url without reloading, history.replaceState do the job. In your page or component:

methods: {
   onClickComplete() {
      if (!process.server) { // I'm not sure it's necessary
         history.replaceState({}, null, window.location + '?filter=complete') // or use your own application logic: globalSiteUrl, $route... or queryString some vars...
      }
   }
}

Upvotes: 7

Related Questions