Nuxt.js: Let fetch know from which route do we navigate from

Created on 19 Jul 2017  路  6Comments  路  Source: nuxt/nuxt.js

I have a page structure of:

pages/
  users/
    _userid.vue
  users.vue

with meta-component inside users.vue. So basically I have a list of items, which is always shown when navigated at /users/*, and a pane for item details, which is shown when navigated at /users/1 etc. In the list page I use fetch method to fetch the user_list from my API. Then I render items as a list of <nuxt-link :to="'/users/' + user.id" v-for="user in user_list">. So far it works okay. I just need to mention that the list has some own state, like filtering.

Then, when I want to get back from the particular item details to the list, thus from /users/1 to /users I don't want to lose the state of my list. Which, unfortunately, happens, as the fetch method of users.vue is being called again.

So I thought: maybe there should be a way to figure out from which route do we navigate from, so I can disable fetching when returning from details view to the list-only view?

Is there a way for nuxt to play nicely with https://router.vuejs.org/en/advanced/navigation-guards.html?

This feature request is available on Nuxt.js community (#c972)
available soon enhancement

Most helpful comment

Hi @gbezyuk

I just made a commit to add from in context, available in both fetch and asyncData on client-side. See https://github.com/nuxt/nuxt.js/commit/03aa65a888354bb67241226dcd7a6c04e1f23ed3

Keep in mind that on hot-reloading, from will be undefined ;)

I'll close it when 1.0-rc1 will be out!

All 6 comments

Hi @gbezyuk, have you tried to use beforeRouteUpdate?
https://router.vuejs.org/en/essentials/dynamic-matching.html#reacting-to-params-changes

@alexchopin yep, I've ended up using all three: fetch, beforeRouteUpdate and beforeRouteEnter, with fetch working serverside-only, beforeRouteEnter dispatching loader only if from.matched.length is true and beforeRouteUpdate comparing to.path.startsWith() and from.path.startsWith(). And it works, but it's really verbose and weird. I guess adding from_route to fetch's context may be very much of use.

Hi @gbezyuk

I just made a commit to add from in context, available in both fetch and asyncData on client-side. See https://github.com/nuxt/nuxt.js/commit/03aa65a888354bb67241226dcd7a6c04e1f23ed3

Keep in mind that on hot-reloading, from will be undefined ;)

I'll close it when 1.0-rc1 will be out!

Awesome, thank you @Atinux!

Close it since rc3 is out

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

bimohxh picture bimohxh  路  3Comments

nassimbenkirane picture nassimbenkirane  路  3Comments

jaredreich picture jaredreich  路  3Comments

vadimsg picture vadimsg  路  3Comments

mikekidder picture mikekidder  路  3Comments