Redirect with page reload Vue JS Router

user_9010442 0
Viewed 190

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
    });
vue.js
2 Answers

You can use this.$router.go() with empty arguments to reload the page. In combination with this.$router.push({ path: '/admin/home' }) you can achieve it without using vanilla JS features.

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

Notice how I used .then after $router.push(). Without then the page reloads too quickly, leaving no time for the route to change.

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

user_131821290

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

user_104768180
Related