search

Home  >  Q&A  >  body text

Vue JS Router: Reload page on redirect

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


P粉087074897P粉087074897497 days ago877

reply all(2)I'll reply

  • P粉543344381

    P粉5433443812023-10-27 10:44:15

    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

    reply
    0
  • P粉009828788

    P粉0098287882023-10-27 10:06:32

    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.

    reply
    0
  • Cancelreply