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

Question

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.

Crassus

Doesn't make any sense. For seo it will follow link in HTML and it will be server rendered each time. What you trying to do is to spoil use experience – Mireyamiriam

What is that "SEO purpose"? – Iowa

Reference DOC – Serna

Answer 1

Check this.

this.$nuxt.refresh()

Laraelaraine

Answer 2

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

Yarak

Answer 3

Try: window.location.reload(true)

Dubbing

Answer 4

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

Slipover

Answer 5

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>

Liquid

Answer 6

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>

Maxon

Answer 7

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

Bastard

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Thaine

Answer 8

This worked for me: this.$router.go(0)

window.location.reload() causes error if it used inside html template, works only as method

Unmindful