How to Reload a Page in Vue.js

Learn How to Reload Pages in Vuejs

In Vue.js, you can refresh the page (i.e., trigger a full page reload) by using JavaScript. You can do this in one of the following ways:

1. Using location.reload():

You can use the location.reload() method to reload the current page. Here’s an example of how you can use it in a Vue.js component method or script block:

<script setup>
import { ref } from 'vue';

const refreshPage = () => {
  location.reload(); // Reloads the current page
};
</script>

You can call this refreshPage method when an event or action triggers the page refresh.

2. Using window.location:

You can also use the window.location object to reload the page. Here’s an example:

<script setup>
import { ref } from 'vue';

const refreshPage = () => {
  window.location.reload(); // Reloads the current page
};
</script>

This method is essentially the same as the first one but provides another way to accomplish the same task.

3. Using Vue Router:

If you are using Vue Router for client-side routing, you can programmatically navigate to the current route to achieve a similar effect. This will not perform a full page reload but will reset the route’s components and state.

Here’s an example:

<template>
  <!-- Your template code here -->
  <button @click="refreshPage">Refresh Page</button>
</template>

<script setup>
import { useRouter } from 'vue-router';

const router = useRouter();

const refreshPage = () => {
  router.go(); // Reloads the current route
};
</script>

In this case, the route will be reloaded, but the entire page won’t be refreshed.

Choose the method that best suits your use case. If you want to perform a full page reload, use the first or second method. If you want to reset the current route’s components and state in a Vue Router-based application, use the third method.

Resources

• https://developer.mozilla.org/en-US/docs/Web/API/Location/reload

Before you go

Thank you for dedicating your time to explore this guide. If you believe it could benefit someone else, remember that sharing is a wonderful way to help others.

If you have any questions, thoughts, or simply want to say hello, please feel free to reach out to me on X via @amjohnphilip. Your engagement and feedback are greatly appreciated. And don’t forget, a round of applause (👏) is always a fantastic way to show your appreciation!

More reads

In Plain English

Thank you for being a part of our community! Before you go:

• Be sure to clap and follow the writer! 👏
• You can find even more content at PlainEnglish.io 🚀
• Sign up for our free weekly newsletter. 🗞️
• Follow us on Twitter(X), LinkedIn, YouTube, and Discord.