How can I refresh the page after I change the router?

[liudangyi]

In some cases, I need to remap the router after users login. But router.replace does nothing when current path is equal to target path.

[liudangyi]

I found a forceRefresh option in router.on. But it seems not implemented yet.

[rajabishek]

@liudangyi Why not just do a typical location.reload(); page refresh. And on refresh the router will also have the updated mappings.

[liudangyi]

Well, location.reload() would completely destroy all stored states, including WebSocket connections.

[altitudems]

Perhaps consider using local storage to persist the state?

I think there is simple example using vuex in its repo.

[amirrustam]

@liudangyi It might help us help you if you provide us the bigger picture of what you are trying to accomplish with remapping the router upon user login? Specificity always helps.

[liudangyi]

For example. I want logged-in users see a dashboard on "/" but anonymous users see a welcome page on "/".

[yyx990803]

You should render different content in the same component based on login state instead of "remapping" the router.

[liudangyi]

Another reason why I need a "refresh" function: we use a beforeEach hook to check authentication. When a user logs in / logs out, we need to trigger this hook again to make sure he has the right to see this page.

[lephuhai]

Hi @liudangyi , If you wanna update data but content in the same component. You can using watch $route.

For example:

watch: {
      '$route' (to, from) {
        if (to.path === '/promotions') {
          this.$store.dispatch('getAllPromotions')
        } else if (to.path === '/promotions/coupon') {
          this.$store.dispatch('getAllPromotions', {
            type: 'coupon'
          })
        }
      }
    }

Dispatch will update component state.

[exnihilo-creatio]

This is a closed and old issue, but I'm leaving this for people that also land on this page, like i had.

@liudangyi I had the need for something similar (for authentication atleast) and settled on the uses of areas. Every area has their own set of routes and pages. You keep a variable named 'area' inside your store, do a Vue.watch on it, and when it changes destroy the current Vue instance and create the new one for the new area. Thus, the only reason for needing the beforeEach is to check for permissions inside the authentication area, and not if they are authenticated, since its assumed they are authenticated if they are viewing the area.

[oceangravity]

+1

[tiagogm]

I ran into this issue following a similar problem.

Not being able to force a route refresh, makes it impossible to "rerun" the beforeEnter guards.
Sometimes it's useful to cause a proper route refresh, specially when the state changed that would cause beforeEnter to fail (say token was expired).