CODEWITHSUNDEEP
vue.jsprogressive-web-appsnuxt.js
Zahid Karim
Zahid Karim

Reputation: 1886

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

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.

Upvotes: 8

Views: 53071

Answers (8)

MAZ
MAZ

Reputation: 891

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

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

Upvotes: 0

Kevin Muchwat
Kevin Muchwat

Reputation: 1575

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>

Upvotes: 1

Mina
Mina

Reputation: 17029

Check this.

this.$nuxt.refresh()

Upvotes: 7

Ahmed Hashem
Ahmed Hashem

Reputation: 1

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

Upvotes: 0

fysherman
fysherman

Reputation: 91

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>

Upvotes: 0

Guvanch
Guvanch

Reputation: 1278

Try: window.location.reload(true)

Upvotes: 4

Prateek Lal
Prateek Lal

Reputation: 325

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

Upvotes: 2

isebarn
isebarn

Reputation: 3940

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

Upvotes: 4

Related Questions