storing url before going to new page with nuxt-link

Question

I want to store my url when I am on the main page /main in the browser before going to another page using nuxt-link. This is my nuxt-link:

<NuxtLink
  :to="`/search?param={number}`"
  @click.native="assignAddress"
>
  SEARCH
</NuxtLink>

And this is the method that is triggered by clicking on nuxt-link:

assignAddress() {
  localStorage.setItem("address", `${this.$route.path}`);
},

The issue is that it saves /search in the browser. What I think happens is that the method assignAddress is being triggered after nuxt changes the page!

How can I store the url in the browser first and then change the page so in my browser I store /main instead of /search?

What is the end goal for this? You probably don't need to store it, especially if it's to go back on the previous page or alike. — kissu, Jun 25 '21 at 07:47

score 1 · Answer 1 · answered Jun 25 '21 at 03:16

@seyet how about you try setting it within the beforeRouteLeave navigation guard.

beforeRouteLeave(to, from, next) {
  // called when the route that renders this component is about to
  // be navigated away from.
  // has access to `this` component instance.
}

Link to docs found here

Just make sure to call next() once you're finished.

score 1 · Accepted Answer · answered Jun 25 '21 at 07:54

As mentionned above, you can indeed use some router guards.
I do prefer to use beforeRouteEnter over beforeRouteLeave because I feel like the resolution flow may be less bug-prone if my targeted component is properly mounted, hence no bug during the component transition.

Here how this would look like code-wise

/pages/search-page.vue

<template>
  <div>This is the search page</div>
</template>

<script>
export default {
  name: 'SearchPage',
  beforeRouteEnter(to, from, next) {
    console.log('came from', from)
    localStorage.setItem('address', from.path)
    next()
  },
}
</script>

storing url before going to new page with nuxt-link

2 Answers2