How can I refresh the whole page on link visit in NuxtJS?

user_3876861 0
Viewed 24251

I have a Nuxt project and for the SEO purpose, I need to reload the pages every time I do visit any page. Is there any way I can do it on Routers?

Currently, my app is with the default behavior of NUXT " renders only the required components on visit". But I need to completely reload the pages.

progressive-web-apps nuxt.js vue.js
7 Answers

Check this.

this.$nuxt.refresh()
user_118879020

I do believe that reloading the page cleares (and re-initializes) your vuex store, if you are using that

I don't know how to reload the page but I have a few suggestions that you could test

Suggestion 1 Wrap your page with a v-if. Then it wont render until you visit it

<template>
  <app v-if="someBoolean">
     .
     .
  </app>
</template>
<scripts>
  export default {
    computed: {
      someBoolean () {
        return blabla 
      }
    }
  }
</scripts>

Suggestion 2

this.$forceUpdate();

Suggestion 3 Bind your component to a key

<template>
  <yourComponent :key="componentKey" />
</template>

And change that key whenever you need re-rendering

user_45511680

If you want to refresh the page manually you can call - this.$router.app.refresh()

user_44609070

Try: window.location.reload(true)

user_115129790

I had the same issue, but this solved it well, just watch changes in the $route() method then refresh appropriately in the layouts/default.vue file.

<template>
  <div>
     <Nuxt keep-alive />
  </div>
</template>

<scripts>
    export default {
        watch: {
            $route() {
                location.reload();
            },
        }
    }
</scripts>
user_73502590

In your layout nuxtjs, bind key property of router view to fullPath which always change on router change. It help rerender router:

 <nuxt :key="$route.fullPath"></nuxt>
user_130710930

If you want to refresh every page you move to.. Just use regular anchor tag <a href="/myRoute"> instead of <nuxt-link to="/myRoute">

user_155149060
Related