I want to first state that I can’t be sure if this is an expected behavior of vue-router or if it’s nuxt implementation of vue-router and page transitions that is causing the behavior.

Problem

When using a computed variable that is dependent on the this.$route.params, upon page leave and before the new page is rendered/created, the computed variable of the prior page also recomputes. In most cases this is not a problem. However, when the page param is used to retrieve an item from the store. For example,

computed: {
  post () {
     return this.$store.getters['post'](this.$route.params.id)
  },

  title () {
    return this.post.title
  }
}

With the above scenario, upon leaving the page, an undefined variable error occurs. As using the post getter with an undefined id, will return a null.

Expected Behavior

I expect that when the page leaves, the page component is destroyed before the route params change so non of the computed variables refresh.

Solution

If the problem is indeed related to page transitions, an option to disable page transition would be great.

I understand I can use local data to avoid this issue but a better approach would be ideal.