Nuxt JS reload data by url parameter

I have a webpage with a fixed Header. There I have the items "Main Accounts" and "Sub Accounts". The pages are completly the same and have the same functionality except that they call different routes of the API to fetch different data. I dont want two different files for that. Everything should be one file and I just read a variable and change the url depends on that. My header has some nav-items:

<b-nav-item to="/accounts">Main</b-nav-item>  <b-nav-item to="/accounts">Subs</b-nav-item>  

Now I need to pass a variable to that redirection, that I can read in the accounts page and then change the link for getting datas. I tried so far:

<b-nav-item to="/accounts?main=true">Main</b-nav-item>  <b-nav-item to="/accounts?main=false">Subs</b-nav-item>  

I can read the parameter in that url with this.$route.query.main, but my problem is, the page doesnt reload, if I switch between the 2 pages. The url is changing, but I dont know how to react to that change. I tried it with a click event and force reload:

@click="$router.go({path:'/accounts', force:true})  

but that forces to reload the complete page.

My favourite solution would be to create a folder structure or whatever. Then have two routes: /mainaccounts and /subaccounts but both lead to the same file and in that file I read that the parameter and then decide what route I have to call depending on the link

https://stackoverflow.com/questions/66888168/nuxt-js-reload-data-by-url-parameter March 31, 2021 at 08:46PM