Redirect with page reload Vue JS Router

Question

I have an app with a Login.vue and Home.vue files. Because I converted an admin HTML website to a vue 3 app, my javascript only works with page reload. When creating the app I selected add router for SPA maybe I shouldn't have. Up to this point, the views are working except when I redirect from login to home without reloading. Since it is not reloading, my navbar or any JS-dependent functions won't work. how do I redirect from login to home with page reload? Currently, I have the below code but still not working.

this.$router.push({
      path: "/admin/home",
      reload: true
    });

Seangle · Accepted Answer · 2024-01-05 10:29:49Z

13

You can use this.$router.go(0) to reload the page. You need the 0 if you use Typescript as mentioned by @Second2None. In combination with this.$router.push({ path: '/some/path' }) you can achieve it without directly changing the browser's window property.

<template>
  <button @click="redirectReload">Redirect & Reload</button>
</template>
    
<script>
  export default {  
    methods: {
      redirectReload() {
        this.$router
          .push({ path: '/expedition' })
          .then(() => { this.$router.go(0) })
      }
    }
  }
</script>

Notice how I used .then after $router.push(). Because the push() method is asynchronous, the reload would happen before the route change without then().

As a bonus, it lets you use all the features of $router.push (for example using arguments like { name: 'home' }.

Example with Composition API and async/await syntax:

<script setup>

import { useRouter } from 'vue-router'
const router = useRouter()

const redirectReload = async () => {
  await router.push({ path: '/expedition' })
  router.go(0)
}

</script>

Update

I recommend checking out this thread as there are answers that describe how to reload the page component without reloading the whole website using the :key prop and other useful information.

edited Jan 5, 2024 at 10:29

answered Jul 28, 2022 at 10:12

Seangle

7287 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Isaac Hatilima Over a year ago

Thank you for the response did the trick.

Todd Hammer Over a year ago

I spent a couple hours troubleshooting why the template section of my login page wasn't rendering when I redirected to it using <RouterLink to="/login">Continue to the login page</RouterLink>. This solved my issue. I don't understand why but it works

Todd Hammer Over a year ago

For anyone using 'script setup' I did it like this: import { useRouter } from 'vue-router'; const router = useRouter(); const redirectReload = ()=> { router .push({ path: '/login' }) .then(()=> { router.go() }) }

Seangle Over a year ago

@ToddHammer your app probably had some problems with component update order. Better to fix that without using crutches like reloading the whole SPA. You better create a new question with more details and ping me

Second2None Over a year ago

If you are using typescript router.go() throws an error: Expected 1 arguments, but got 0.ts(2554) to fix this you can just do router.go(0) for reload.

TrippleN · Accepted Answer · 2022-07-28 08:46:44Z

3

Vue Router not reload page when you navigate to new URL.

You can try this code for you issue:

const url = new URL('/admin/home', window.location.origin)
window.location.href = url.toString()

Hope this help

answered Jul 28, 2022 at 8:46

TrippleN

1545 bronze badges

Collectives™ on Stack Overflow

Redirect with page reload Vue JS Router

2 Answers 2

Update

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Update

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related