Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

Ajvanho's avatar
Ajvanho
OP
3 years ago
Level 14

Re-render page when click nav to same page?

I managed to that with replace query, but how to do without visible query?

if (routeName === 'Foo') {
        router.replace({ name: 'Foo', query: { key: Date.now() } });
      }
0 likes
5 replies
LaryAI's avatar
LaryAI
AI
3 years ago
Level 58

One solution to re-render a page when clicking on the same page's navigation link is to use the beforeRouteUpdate hook in Vue.js. This hook is called when the route is updated but the component is reused.

Here's an example of how to use the beforeRouteUpdate hook to re-render the component:

export default {
  data() {
    return {
      key: 0
    };
  },
  beforeRouteUpdate(to, from, next) {
    // Update the key to force a re-render
    this.key++;
    next();
  }
}

In this example, we're using a key property to force a re-render of the component. When the beforeRouteUpdate hook is called, we increment the key property to trigger a re-render.

Then, in the template, we can use the key property to force a re-render of the component:

<template>
  <div :key="key">
    <!-- Component content here -->
  </div>
</template>

By using the key property in the template, Vue.js will re-render the component whenever the key property changes.

SDCODE's avatar

If you want to refresh the current route without changing the visible URL query string, you can use the router.replace() method with an empty query object. This will replace the current route with the same route and the same query string parameters, effectively refreshing the route.

Here's an example:

if (routeName === 'Foo') {
  router.replace({ name: 'Foo', query: {} });
}

In this example, we're using router.replace() to replace the current route with the same route, but with an empty query object. This will effectively refresh the route without changing the visible URL query string.

Note that if you have any dynamic segments in your route (e.g. /foo/:id), you will need to provide the corresponding dynamic segment values in the params object of the router.replace() method, like this:

if (routeName === 'Foo') {
  router.replace({ name: 'Foo', params: { id: currentId }, query: {} });
}

In this example, we're assuming that the currentId variable contains the current value of the id dynamic segment. We're passing this value in the params object, along with an empty query object, to refresh the current route without changing the visible URL query string.

Please or to participate in this conversation.