Nuxt.js: How to recreate page on same link?

[Clemens-B]

Hello,

I have a fixed navigation bar and I want to recreate (without reloading the whole App) the page, if the users clicks the same link again. I tried to work with the prop key on the nuxt tag, but this doesn't work.

<div class="navigation-bar">
   <button v-on:click.native="$router.push('/news')">News</button>
</div>

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

See also here: Stackoverflow

_{This question is available on Nuxt.js community (#c2000)}

[clarkdo]

1. native only supports binding on components, https://vuejs.org/v2/api/#v-on
2. Nuxt has created key of <nuxt> by value of $route.path, if you want to change it, use :nuxtChildKey='...' on <nuxt>

If you wan to reload pages, try:

<button @click="$router.go({path:'/news', force: true})">News</button>

[Clemens-B]

Hello clarkdo,

thanks for your answer. $router.goreloads the whole page, but I want to initialise a new instance of the page without reloading the webapp.

:nuxtChildKey sounds promising and I already gave it a first shoot by applying a unique ID like Date.now() to :nuxtChildKey but this doesn't seem to work.

For now, I routing to a loading page before redirecting to news again.

[clarkdo]

You can have a look at https://github.com/vuejs/vue-router/issues/296, canReuse or re-fetch the data may help you

[hartmut-co-uk]

@Clemens-B you're probably past that issue, but everyone ending up here.. -> have a look at $forceUpdate()

<template>
  <div id="app">
    <nuxt ref="page"/>
    ...
</template>

<script>
    ...
    this.$refs.page.$forceUpdate()
    ...
</script>

works like a charm for me, no 'hard' page reload, calling everything, e.g. fetch & asyncData, too..

Edit:
For completion, the actual js part even includes sth like

if (this.$router.currentRoute.path === to) {
    this.$refs.page.$forceUpdate()
} else {
    this.$router.push(to)
}

[benwinding]

Any new solutions to this yet?

[benwinding]

I found that as described above this solves the issue.

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

And allows any page to render again even if it's a link to itself with different query parameters

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.