Change Nuxt Route Without Re-rendering

Question

I have a Nuxt page and i want to change route path without re-rendering or refreshing page with a method on a button.

if i do this.$router.push() or replace(), page will refresh and if i do window.history.pushState() or replaceState() that works fine but after that if i add a query with this.$router.push({ query: a = b }) on my page, page will refresh because changing route with window.history will not change $route and when i use this.$router.push, Vue Router thinks its a different page.

I've done a lot of search on internet and did not find anything, so please don't label this question as duplicate.

user_8816585 · Answer

What you're actually looking for is a Default Layout and some nested routes. Here is an example on how to achieve this in Nuxt with just a few steps: https://nuxtjs.org/examples/routing-nested-pages

user_9155760 · Answer

Finally i solved this problem with using parent page and nuxt childs, i changed tabs to nav and rendered base components on parent page and other things on child pages and now it works fine. Tnx to @kissu and @Braks.

Change Nuxt Route Without Re-rendering

2 Answers