Vue JS Router: Reload page on redirect

Question

I have an application with Login.vue and Home.vue files. Because I'm converting an admin HTML website to a vue 3 application, my javascript only works on page reloads. When creating the application I chose to add a router for the SPA, maybe I shouldn't have done that. So far the view is working except when I redirect from login to home page without reloading. Since it won't reload, my navigation bar or any functionality that relies on JS won't work. How to redirect from login to home page via page reload? Currently I have the following code but it still doesn't work.

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

Answer 1

Vue Router does not reload the page when navigating to a new URL.

You can try this code for your problem:

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

Hope this helps

Answer 2

You can use this.$router.go() with empty parameters to reload the page. Combined with this.$router.push({ path: '/admin/home' }) you can achieve this without using normal JS functionality.

    
sssccc

Note how I use .then after $router.push(). Without then, the page would reload too quickly, leaving no time to change routes.

As a bonus, it lets you use all the functionality of $router.push (e.g. using parameters like { name: 'home' } etc.