Redirect with page reload Vue JS Router-CodePudding

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
    });

CodePudding user response：

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.

<button @click="redirectReload">Redirect & Reload</button>

  methods: {
    redirectReload() {
      this.$router
        .push({ path: '/expedition' })
        .then(() => { this.$router.go() })
    },
  }

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"}).

CodePudding user response：

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